<!DOCTYPE HTML> 作用
有这行是标准模式
去掉是混杂模式 向前兼容老的渲染方式
查看滚动条的滚动距离
window.pageXOffset / pageYOffsetIE8及以下不兼容document.body/documentElement.scrollLeft/scrollTop
兼容性混乱，两个值对立一个有则另一个为0，使用时两个值相加
查看视口尺寸
window.innerWidth/innerHeight
IE8及IE8以下不兼容document.documentElement.clientWidth/clientHeight
标准模式下，任意浏览器都兼容document.body.clientWidth/clientHeight
怪异模式
innerWidth 和 clientWidth 区别
如果这里存在一个滚动条，并且滚动条占用了一些空间，那么 clientWidth/clientHeight 会提供没有滚动条（减去它）的 width/height。换句话说，它们返回的是可用于内容的文档的可见部分的 width/height。
而 window.innerWidth/innerHeight 包括了滚动条。
alert( window.innerWidth ); // 整个窗口的宽度
alert( document.documentElement.clientWidth ); // 减去滚动条宽度后的窗口宽度
查看元素的几何尺寸
-
domEle.getBoundingClientRect();
返回结果不实时
了解一下 后面还有其他元素尺寸 -
dom.offsetWidth dom.offsetHeight
返回宽高 -
dom.offsetLeft dom.offsetTop
对于无定位祖先的元素，返回相对文档的坐标；对于有定位祖先的元素，返回相对于最近有定位父级的坐标。
不管利用margin还是position之类产生的位移都会显示
-dom.offsetParent返回最近的定位祖先
body.offsetParent 返回 null
滚动条滚动
-
scroll(x,y) / scrollTo(x,y)
两个方法一样，跳转到xy的位置 -
scrollBy(x,y);
累加滚动
禁止滚动
要使文档不可滚动，只需要设置 document.body.style.overflow = "hidden"该页面将冻结在其当前滚动上。
这个方法的缺点是会使滚动条消失。如果滚动条占用了一些空间，它原本占用的空间就会空出来，那么内容就会“跳”进去以填充它。
可以在body右侧加上padding 抵消滚动条变化
实现demo：
- 展开更多 -> 收起的时候 scroll跳转到点击展开的位置
- scrollBy() 实现自动阅读