DOM的事件操作
一、JavaScript的组成
JavaScript基础分为三个部分：
-
ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
-
DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
-
BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。
二、事件
JS是以事件驱动为核心的一门语言。
事件的三要素
事件的三要素：事件源、事件、事件驱动程序。
比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯的开和关。
再比如，网页上弹出一个广告，我点击右上角的X，广告就关闭了。这件事情里，事件源是：X。事件是：onclick。事件驱动程序是：广告关闭了。
于是我们可以总结出：谁引发的后续事件，谁就是事件源。
总结如下：
-
事件源：引发后续事件的html标签。
-
事件：js已经定义好了（见下图）。
-
事件驱动程序：对样式和html的操作。也就是DOM。
代码书写步骤如下：（重要）
-
（1）获取事件源：document.getElementById(“box”); //类似与ios语言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
-
（2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };
-
（3）书写事件驱动程序：关于DOM的操作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 #active{ 8 background-color: greenyellow; 9 width: 100px; 10 height:100px; 11 } 12 </style> 13 </head> 14 <body> 15 <div id='active'></div> 16 <script type="text/javascript"> 17 // 获取dom 18 var odiv = document.getElementById('active'); 19 //绑定事件 20 var isgreen = true; //本次目的是点击变色且变宽然后隐藏掉，再单击变回来，故需要一个判断条件 21 odiv.onclick = function(){ 22 // 驱动程序放在匿名函数里面,执行操作，要实现的效果 23 // 所有的带-的，改变标签的样式在js里都用驼峰体写，如background-color就为backgroundColor 24 if (isgreen) { 25 odiv.style.backgroundColor = 'red'; 26 odiv.style.width = '200px'; 27 odiv.style.display = 'none'; 28 isgreen = false; //记得变量有提升 var isgreen； 29 }else { 30 odiv.style.backgroundColor = 'greenyellow'; 31 isgreen = true; 32 } 33 }; 34 </script> 35 </body> 36 </html>
常见事件如下：
1、获取事件源的方式（DOM节点的获取）
获取事件源的常见方式如下：
1 var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签 2 3 var arr1 = document.getElementsByTagName("div1"); //方式二：通过 标签名 获得 标签数组，所以有s 4 5 var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，所以有s
2、绑定事件的方式
1、匿名函数
2、普通函数 用的是函数名fun
3、行内模式 用的是fun(),且对象想改变属性，不能用this
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 </head> 8 <body> 9 <div id="first" class="active"></div> 10 <script type="text/javascript"> 11 // DOM Document Object Model 文档对象模型 所有的doc事件方法都在里面 12 document.write(window) //[object Window] 13 console.log(window) //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} 14 15 // 文档 16 document.write(document) //[object HTMLDocument] 17 console.dir(document) // #document 18 19 // html 20 document.write(document.documentElement) //[object HTMLHtmlElement] 21 console.log(document.documentElement) // 获取怎么html文件里的所有内容显示所有的标签，通过这个操作所有的标签 22 23 24 //body 获取body标签的内容 25 document.write(document.body) 26 console.log(document.body) 27 28 // dom 操作三步走： 29 // 1、获取事件对象（就是想操作的对象） 30 // 2、绑定事件（怎么干，点击鼠标，鼠标悬浮，创建标签等等），所有的事件方法，js都已定义好，只需按需调用 31 // 3、事件驱动程序（执行的操作，如改变对象的颜色，字体等等） 32 33 //获取dom三种方式： 34 var odiv = document.getElementById('first'); // 通过id获取单个标签 35 var odiv1 = document.getElementsByClassName('active'); // 通过 类名 获得 标签数组，所以有s(相同的类可以被多个标签引用，所以是数组，如需具体到某一个加上索引即可) 36 var odiv2 = document.getElementsByTagName('div');//通过 标签名 获得 标签数组，所以有s 37 38 39 // 绑定dom三种方式： 40 // 1、匿名函数 41 // 2、普通函数 用的是函数名fun 42 // 3、行内模式 用的是fun(),且对象想改变属性，不能用this 43 44 // 1、通过匿名函数绑定，最常用 45 odiv.onclick = function(){ 46 // 驱动程序 47 } 48 49 // 2、通过先定义普通函数，先写好逻辑，再绑定 50 function add(obj){ 51 obj.style.backgroundColor = 'red'; 52 } 53 odiv.onmouseover = add; // 绑定的是函数名，而不是add(),因为add()是函数执行的结果 54 </script> 55 56 <!-- 3、行内绑定：注意对象自己改变自己的属性还是需要通过document来 --> 57 <div id="box3" onclick="fun()"></div> 58 <script type="text/javascript"> 59 function fun(){ 60 box3.style.backgroundColor = 'green'; 61 //或 62 document.getElementById('box3').style.backgroundColor = 'green'; 63 } 64 </script> 65 </body> 66 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 #active{ 8 background-color: greenyellow; 9 width: 100px; 10 height:100px; 11 } 12 .box{ 13 background-color: red; 14 width: 100px; 15 height: 100px; 16 } 17 .box1{ 18 width: 200px; 19 height: 200px; 20 background-color: yellow; 21 } 22 .active{ 23 background-color: red; 24 } 25 </style> 26 </head> 27 <body> 28 <div id='active'></div> 29 <!-- 通过id获取对象：返回单一对象 --> 30 <script type="text/javascript"> 31 // 获取dom 32 var odiv = document.getElementById('active'); 33 //绑定事件 34 var isgreen = true; //本次目的是点击变色且变宽然后隐藏掉，再单击变回来，故需要一个判断条件 35 odiv.onclick = function(){ 36 // 驱动程序放在匿名函数里面,执行操作，要实现的效果 37 // 所有的带-的，改变标签的样式在js里都用驼峰体写，如background-color就为backgroundColor 38 if (isgreen) { 39 odiv.style.backgroundColor = 'red'; 40 odiv.style.width = '200px'; 41 // odiv.style.display = 'none'; 42 isgreen = false; //记得变量有提升 var isgreen； 43 }else { 44 odiv.style.backgroundColor = 'greenyellow'; 45 odiv.style.width = '100px'; 46 isgreen = true; 47 } 48 }; 49 </script> 50 51 52 53 <!-- 通过类获取对象：返回数组 --> 54 <div class="box"></div> 55 56 <div class="box1" id="box1">girl</div> 57 58 <script type="text/javascript"> 59 var isNow = true; 60 var odiv = document.getElementById('box1'); //指定事件对象 61 // 熟练了可以不指定事件对象直接写 62 // js里的this和面向对象的self一样，表示对象自己，即事件对象 63 // 下面三种方式都表示指定对象 64 document.getElementById('box1').onclick = function(){ //绑定事件 65 console.log(document.getElementById('box1')); 66 console.log(odiv); 67 console.log(this); 68 69 if (isNow) { 70 // className为类名，this.className表示对象自己的类名，即为标签指定的类名 71 // odiv.className = odiv.className + 'active'; 72 // 后声明的类优先级要高active是后声明的 73 this.className = this.className + ' active'; 74 isNow = false; 75 }else { 76 //再次点击还原 77 this.className = 'box1'; 78 isNow = true; 79 } 80 }; 81 </script> 82 83 <!-- 通过标签获取对象，返回数组 --> 84 <script type="text/javascript"> 85 86 function $(obj){ 87 // 封装查找事件对象通用函数 88 return document.getElementsByTagName(obj)[0] 89 }; 90 91 // 通过标签找对象 92 var obutton = document.getElementsByTagName('button')[0]; 93 // 应用上封装函数则如下 94 var obutton = $('button'); 95 96 // 改变标签内部的一些属性如 id 、class、title、style 97 // img( src alt) a(href) input(type name value placeholder) from(action method) 98 // 直接访问document.getElementsByTagName('img')[0].src等等 99 100 $('img').src = '../install/html/mi_picture/logo16366.gif'; 101 $('img').alt = 'dada'; 102 $('a').href = 'http://www.baidu.com'; 103 104 console.log($('div').innerText) 105 // 结果： 更改 隐藏 happy一下 106 107 108 console.log($('div').innerHTML) 109 // <button class="python">更改</button> 110 // <button class="python">隐藏</button> 111 // <input type="text" placeholder="love "> 112 // <img src="../install/html/mi_picture/logo16366.gif" alt="dada"> 113 // <a href="http://www.baidu.com">happy一下</a> 114 115 innerText 获取的是文本，添加的也是文本 116 innerHTML 获取的是所有的文本加标签，添加标签及文本 117 </script> 118 119 </body> 120 </html>
Dom对于值得操作
/ 改变标签内部的一些属性如 id 、class、title、style
// img( src alt) a(href) input(type name value placeholder) from(action method)
// 直接访问document.getElementsByTagName('img')[0].src等等
// innerText 获取的是文本，添加的也是文本，更改得标签内所有得内容
// innerHTML 获取的是所有的文本加标签，添加标签及文本，可向标签中直接插入一个标签，如‘<a href= 'http://www.lang.com'>百度一下</a>’
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <div> 9 <img src="" alt=""> 10 <button>隐藏</button> 11 <input type="" placeholder="happy一下" value=""> 12 <a href="">奋斗的岁月</a> 13 </div> 14 15 16 <script type="text/javascript"> 17 // 改变标签内部的一些属性如 id 、class、title、style 18 // img( src alt) a(href) input(type name value placeholder) from(action method) 19 // 直接访问document.getElementsByTagName('img')[0].src等等 20 // innerText 获取的是文本，添加的也是文本 21 // innerHTML 获取的是所有的文本加标签，添加标签及文本 22 function $(obj){ 23 return document.getElementsByTagName(obj)[0]; 24 }; 25 26 //直接操作属性 27 $('img').src = '../install/html/mi_picture/logo16366.gif'; 28 $('img').alt = 'dada'; 29 $('a').href = 'http://www.baidu.com'; 30 31 // 答应innerText 与innerHTML的区别 32 console.log($('div').innerText) 33 // 结果： 隐藏 happy一下 奋斗的岁月 34 35 console.log($('div').innerHTML) 36 // 结果： 37 // <button class="python">更改</button> 38 // <button class="python">隐藏</button> 39 // <input type="text" placeholder="love "> 40 // <img src="../install/html/mi_picture/logo16366.gif" alt="dada"> 41 // <a href="http://www.baidu.com">happy一下</a> 42 </script> 43 </body> 44 </html>
innerHTML添加文本：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <div> 9 <button>提交</button> 10 </div> 11 <script type="text/javascript"> 12 var oDiv = document.getElementsByTagName('div')[0] 13 var oBun = document.getElementsByTagName('button')[0] 14 oBun.onclick = function(){ 15 // 第一种向标签中插入内容 16 oDiv.innerHTML = '<h1>我的青年时代</h1>' 17 // 模板字符串ecm6中，反引号，插入变量名 ${name}这样内容可以变化 18 var name = 'wen'; 19 var age = '30'; 20 oDiv.innerHTML = `<ul> 21 <li>${name}</li> 22 <li>${age}</li> 23 </ul>` 24 25 }; 26 27 </script> 28 </body> 29 </html>
案例1：点击按钮，关闭图片，再点击，显示图片，同时按钮得文字也跟着改变【这个小例子可扩展为导航栏上面的广告，点击X 关闭广告】
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <div> 9 <img src="" alt=""> 10 <button>隐藏</button> 11 </div> 12 <script type="text/javascript"> 13 // 需求：点击按钮，隐藏图片，，再点击，显示图片且按钮文字形成提示 14 // 这个小例子可扩展为导航栏上面的广告，点击X 关闭广告 15 var obuttons = $('button'); //获取对象,第一个按钮 16 var oimg = $('img') 17 var isShow = true; 18 obuttons.onclick = function(){ 19 if (isShow) { 20 oimg.style.display = 'none'; 21 obuttons.innerText = '显示'; //按钮文字默认为隐藏 22 isShow = false; // 改变条件 23 }else { 24 oimg.style.display = 'block'; 25 obuttons.innerText = '隐藏'; 26 isShow = true; 27 } 28 }; 29 </script> 30 </body> 31 </html>
阻止默认事件发生：
常见的有a标签的自动转超链接及submit按键自动提交表单信息，故在js中如有操作需提前阻止默认事件发生，执行我们自己写的逻辑。
阻止a标签的默认事件小技巧：<a href=javascript:void(0);>
另一种方法：event.preventDefault()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>京东广告栏</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 .top_banner{ 13 width: 100%; 14 background-color: rgb(230,15,82); 15 } 16 17 .container{ 18 width: 1190px; /*京东的中间盒子*/ 19 margin: 0 auto; /*盒子居中*/ 20 position: relative; 21 } 22 23 .top_banner .container .banner{ 24 display: block; 25 width: 100%; 26 height: 80px; 27 background: url(http://img11.360buyimg.com/da/jfs/t23038/322/2050889343/74857/ef45186e/5b7276c9Na1fe6db5.jpg) no-repeat center 0; 28 /*设置背景图，不平铺，居中显示*/ 29 } 30 31 .top_banner .container .close{ 32 /*display: block;*/ 33 position: absolute; 34 /*定位的标签就脱离标准文档流，可以设置宽高了*/ 35 right: 0; 36 top:0; 37 /*上面这两个一定要加，不然就会在父块的内容后面，想浮起来左上角对其，就必须加*/ 38 width: 20px; 39 height: 20px; 40 color: white; 41 text-align: center; 42 line-height: 20px; 43 text-decoration: none; 44 45 } 46 47 .hide{ 48 display: none; /*隐藏可以在原类的属性上加上此类即可，一个标签有多个权重相同的类，从上到下，后面的覆盖前面的*/ 49 } 50 51 52 </style> 53 </head> 54 <body> 55 <div class='top_banner' id="top_banner"> 56 <div class="container"> 57 <a href="#" class="banner" id="banner"></a> 58 <a href="http://www.baidu.com" class="close" id="closeBanner">X</a> 59 </div> 60 </div> 61 <script type="text/javascript"> 62 // 需求：当点击x的时候，隐藏广告栏，且不进行跳转等动作 63 var oClose = document.getElementById('closeBanner') // 获取事件对象 64 oClose.onclick = function(event){ 65 event.preventDefault(); // 阻止当前标签的默认事件，非常重要！！！！ 66 document.getElementById('top_banner').className += ' hide'; // 字符串拼接 67 // 注意‘ hide’里hide前需要加一个空格，不然加到标签中和其它的类字符串写在一起了会失效 68 69 // 点击x后，跳转到其它动作了如其它网页，这是不对的，需求阻止这个自动事件 70 document.getElementById('top_banner').style.display = 'none'; 71 } 72 </script> 73 </body> 74 </html>
DOM（Document Object Model）中各节点事件对象的分布：
// DOM 文档对象模型 所有的dom事件方法都在里面
document.write(window) //[object Window]
console.log(window) //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
// 文档
document.write(document) //[object HTMLDocument]
console.dir(document) // #document
// html
document.write(document.documentElement) //[object HTMLHtmlElement]
console.log(document.documentElement) // 获取html文件里的所有内容显示所有的标签，通过这个操作所有的标签，除了一行没有<!doctype html>表示dom文档；
//body 获取body标签的内容
document.write(document.body)
console.log(document.body)
入口函数
理论基础：js的加载是和html同步加载的
window窗口包括：bom + dom
window加载顺序： html加载完成，生成dom树
即先文档加载dom，再图片加载，都加载完成表示窗口加载完成；
场景：
为了统一将js放在一起，div放在一起，结构分明，这就导致js可能放在div前面。
作用：
解决元素在定义之前使用，即script在div写，不加的话因从上到下执行找不到而报错。同时保证整个页面所有元素即标签加载完毕后再执行js内容。
使用方法：
将使用元素的代码放在onload里面
<script>
window.onload = function(){
后面的function就是回调函数
js代码……
}
</script>
缺点：
1、覆盖现象，如果文档中不小心写了多个windwow.onload，后面的会覆盖前面的。
2、window.onload必须等窗口加载完成后才能执行里面的方法，如果网上差，图片等需要很久才能加载完成的原因，导致需要一直等待图片加载完成才能执行window.onload的代码，体验会非常差，解决方案就是加载dom即加载html里的所有标签，图片不管，这样体验就很好了，框架里都是这样做的。
document.onload = function(){
所有操作对象的操作都放在这里，就不会发生找不到对象的error了，就不会因js放在对象前面而无法执行，返回undefined
}
BOM对象【浏览器】
实例：锚点值的跳转
知识：window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。
location对象的属性 https://blog.csdn.net/luofeng457/article/details/70214101
-
href：跳转
-
hash 返回url中#后面的内容，包含#
-
host 主机名，包括端口
-
hostname 主机名
-
pathname url中的路径部分
-
protocol 协议 一般是http、https
-
search 查询字符串
-
锚点值跳转
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>锚点值跳转</title> 6 </head> 7 <body> 8 <!-- history hash --> 9 <a href="#/login">登录</a> 10 <a href="#/register">注册</a> 11 <div id="app"></div> 12 13 <script> 14 //锚点值的跳转，bom中的location事件 15 16 window.onhashchange = function () { 17 console.log(location.hash); 18 var oDiv = document.getElementById('app'); 19 switch (location.hash) { 20 case '#/login': 21 //未来要与后端进行的交互的代码 22 oDiv.innerHTML = '<h2>我是登录页面</h2>' 23 break; 24 case '#/register': 25 oDiv.innerHTML = '<h2>我是注册页面</h2>' 26 break; 27 default: 28 oDiv.innerHTML = '<p>人生苦短，我学python</p>' 29 break; 30 } 31 }; 32 </script> 33 </body> 34 </html>
实例：固定导航栏及滚动监听
知识：固定定位+ dom中的盒子位置获取方法 offsettop，scrollTop
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 ul{ 12 list-style: none; 13 } 14 a{ 15 text-decoration: none; 16 } 17 input{ 18 border: 0; 19 outline: none; 20 } 21 body{ 22 /*padding-top: 80px;*/ 23 } 24 .header{ 25 width: 100%; 26 height: 70px; 27 background-color: black; 28 /*display: none;*/ 29 } 30 .w{ 31 width: 1210px; 32 overflow: hidden; 33 margin: 0 auto; 34 } 35 .header ul li{ 36 float: left; 37 width: 242px; 38 height: 70px; 39 line-height: 70px; 40 text-align: center; 41 background-color: blue; 42 43 } 44 .header ul li a{ 45 display: block; 46 width: 242px; 47 height: 70px; 48 color: #fff; 49 } 50 51 /*固定导航栏*/ 52 .header-fix{ 53 width: 100%; 54 height: 80px; 55 background-color: white; 56 box-shadow: 0 0 5px #888; 57 display: none; 58 position: fixed; 59 top: 0; 60 left: 0; 61 z-index: 99999; 62 /*margin-bottom: 10px;*/ 63 } 64 .header-fix .logo{ 65 float: left; 66 width: 117px; 67 height: 57px; 68 padding-top: 23px; 69 } 70 .header-fix .fm{ 71 float: left; 72 width: 700px; 73 height: 80px; 74 margin-left: 100px; 75 } 76 .fm input[type='text']{ 77 float: left; 78 width: 578px; 79 height: 50px; 80 border-top: 1px solid #999; 81 border-left: 1px solid #999; 82 border-bottom: 1px solid #999; 83 margin-top: 15px; 84 padding-left: 20px; 85 font-size: 20px; 86 } 87 .fm input[type='submit']{ 88 float: left; 89 width: 100px; 90 height: 52px; 91 background-color: #38f; 92 position: relative; 93 top: 15px; 94 color: #fff; 95 line-height: 52px; 96 font-size: 18px; 97 } 98 .box1{ 99 width: 100%; 100 height: 200px; 101 background-color: red; 102 } 103 .box2{ 104 width: 100%; 105 height: 300px; 106 background-color: green; 107 } 108 109 </style> 110 </head> 111 <body style="height: 2000px"> 112 <div class="header"> 113 <div class="w"> 114 <ul> 115 <li><a href="#">网站导航</a></li> 116 <li><a href="#">网站导航</a></li> 117 <li><a href="#">网站导航</a></li> 118 <li><a href="#">网站导航</a></li> 119 <li><a href="#">网站导航</a></li> 120 </ul> 121 </div> 122 </div> 123 <div class="header-fix"> 124 <div class="w"> 125 <div class="logo"> 126 <img src="./logo_top.png" alt=""> 127 </div> 128 <form class="fm"> 129 <input type="text" name=""> 130 <input type="submit" name="" value="百度一下"> 131 </form> 132 </div> 133 </div> 134 <div class="box1"></div> 135 <div class="box2"></div> 136 <a href="javscript:void(0);">百度</a> 137 138 <!-- e.preventDefault(); --> 139 140 <script type="text/javascript"> 141 window.onload = function(){ 142 var box2Height = document.getElementsByClassName('box2')[0]; 143 var fixBox = document.getElementsByClassName('header-fix')[0]; 144 var headerBox = document.getElementsByClassName('header')[0]; 145 146 window.onscroll = function(){ 147 console.log(box2Height.offsetTop); 148 if (document.documentElement.scrollTop >=box2Height.offsetTop) { 149 fixBox.style.display = 'block'; 150 document.body.style.paddingTop = '80'+ 'px'; 151 headerBox.style.display = 'none'; 152 }else{ 153 fixBox.style.display = 'none'; 154 document.body.style.paddingTop = '0'+ 'px'; 155 headerBox.style.display = 'block'; 156 } 157 } 158 } 159 </script> 160 161 </body> 162 </html>
client、offset、scroll系列：盒子的位置信息
client：计算对象自己盒模型的宽高
var obj = document.getElementsByTagName('div')[0]
obj.clientTop： 盒子边框的高度 即border
obj.clientWidth/Height : 可视宽度/高度 即 内容+padding 不算border
offset : 计算嵌套中的盒子到body，到父辈盒子的距离【偏移】
offsetWidth/Height：盒模型的宽高，即 内容+padding+border
offsetTop/Left：【滚动监听的目标盒子到父辈或到窗口顶部的参考点】
如果父辈没有定位：子盒子不管定位否，都是子盒子外边框到body的距离；
如果父辈定位了，子辈定位了，就是到父辈的距离，以父辈作为参考，子盒子的外边框到父盒子的内边框的距离；
scroll：鼠标滑轮从上到下，从左到右，卷起的距离，动态的数据
window.onscroll(function(){}) : onscroll是动态监听滚动距离事件名，window是对象，计算谁就算谁
scrollTop：到父盒子的距离，不包含border，即 内容+padding，可视高度
scrollLeft/Width/Height：内容+padding