爱站程序员基地一、offset家族
三大家族：offset、scroll、client
offset：偏移、补偿、位移
offset家族：是js中一套获取元素尺寸 的方法。
offset家族包括：offsetWidth、offsetHeight、offsetLeft、offsetTop、offsetParent
1、offsetWidth和offsetHeight
offsetwidth = content + padding + border
offsetHeight = content + padding + border
所有节点元素都含有这两个属性，获取节点后，只需直接调用这两个属性即可获取元素节点的宽和高。
<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><title></title><style type=\"text/css\">#d1{width: 300px;height: 300px;border: 10px solid skyblue;color: red;padding: 20px;margin: 10px auto;}</style></head><body><div id=\"d1\">hello js</div><script type=\"text/javascript\">var d1 = document.querySelector(\"#d1\");console.log([d1]);//offsetwidth = content + padding + border//offsetHeight = content + padding + borderconsole.log(d1.offsetWidth);console.log(d1.offsetHeight);</script></body></html>
2、offsetLeft和offsetTop
返回距离上级盒子（带有定位）左边的位置；如果父级都没有定位，则以浏览器为准。
offsetLeft：（父元素的边框border） + 父元素的内边距padding + 元素的外边距margin
offsetTop：（父元素的边框border） + 父元素的内边距padding + 元素的外边距margin
注：若父元素是body则加上父元素边框border；若父元素不是body则不加父元素边框border。
<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><title></title><style type=\"text/css\">body{width: 600px;height: 600px;border: 5px solid orange;padding: 20px;}#d1{width: 300px;height: 300px;border: 10px solid skyblue;color: red;padding: 20px;margin: 10px auto;}</style></head><body><div id=\"d1\">hello js</div><script type=\"text/javascript\">var d1 = document.querySelector(\"#d1\");console.log([d1]);console.log(d1.offsetLeft);console.log(d1.offsetTop);</script></body></html>
3、offsetParent
检测父系盒子中带有定位的父盒子节点，返回结果是该对象的父级（带有定位）
如果当前元素的父级元素。没有css定位（position为absolute、relative、fixed），则offsetParent的返回值为body。
如果当前元素的父级元素，有css定位（position为absolute、relative、fixed），则offsetParent的返回值为最近的那个父级元素。
offsetLeft和style.left的区别
1、offsetLeft可以返回没有定位盒子的距离左侧的位置。如果父系盒子中都没有定位，以body为准。
style.left只能获取行内式，如果没有，则返回“ ”（返回空）
2、offsetLeft返回的是数字，而style.left返回的是字符串，且带有单位px。
3、offsetLeft和offseTop只读 ，即只能获取值；而style.left和style.top可读写 ，即可以对其进行赋值改变。
4、如果没有给html元素指定top样式，则style.top返回的是空字符串。
总结：
一般用offsetLeft和offsetTop获取值，用style.left和style.top赋值。
因为：style.left只能获取行内值，获取的值可能为空，容易出现NaN
offsetLeft获取值很方便，且获得的是number，方便计算，是只读属性，不能赋值。
二、scroll家族
1、scrollWidth和scrollHeight
获取盒子的宽高。调用者为节点元素，不包括border和margin。
scrollWidth = width + padding
scrollHeight = height + padding
scrollHeight的特点：
如果文字超除了盒子，高度就为内容的高（包括超出的内容）；不超出，则是盒子本身的高度。
2、scrollTop和scrollLeft
网页被卷去的头部和左边的部分。在有滑动条、网页滚动的时候出现。
比如：一个网页网上滚动的时候，上面的部分自然被浏览器遮挡了，则遮挡的高度就是scrollTop
scrollTop 这个属性的写法要注意兼容性。
最终版的兼容性写法：
window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
3、scrollto()和scrollBy()
设置滚动至什么位置。
scrollTo()是绝对位置，针对于(0,0)来进行滚动的。
scrollBy()是相对位置，针对于网页中当前位置来进行滚动的。
不管是scrollTo()还是scrollBy()，它们移动的都是View或ViewGroup中的内容，而不是view或viewGroup本身。并且这个移动过程是瞬间完成的。
例子：根据以下需求实现
1、网页结构主要包括广告栏、头部导航栏、主要内容
2、实现当滚动页面超出广告栏大小时，头部导航栏会固定在网页头部；回到顶部是恢复原始状态。
3、实现一个回到顶部元素，点击此元素可以匀速或加速回到顶部，且会有逐渐上升的效果。
下面是js代码：
//监听滚动事件window.onscroll = function(e){// console.log(e)// console.log(window)console.log(window.scrollY);console.log(window.pageYOffset);var navDiv = document.querySelector(\"#nav\");if (window.pageYOffset>300) {//当滚动位置坐标大于300的时候，就固定导航栏navDiv.style.position = \"fixed\";navDiv.style.top = 0;navDiv.style.left = 0;}else{//当滚动位置坐标小于等于300的时候，就设置导航栏为静态定位navDiv.style.position = \"static\";navDiv.style.top = 0;navDiv.style.left = 0;}}window.onload = function(){var rocketDiv = document.querySelector(\"#rocket\");rocketDiv.onclick = function(){var y = window.pageYOffset;//设置每次滚动的像素var step = 50;//设置间隔函数，使其回到顶部的过程是有慢慢上升的效果。var interId = setInterval(function(){//设置加速返回顶部，若没有step++，则是匀速。step++;y = y-step;if (y<=0) {y=0;clearInterval(interId);}scrollTo(0,y)})}}
