思考一
window与document的联系与差别
请思考下面返回的值：
window.document === document
document.documentElement === document.querySelector('html')
document.body === document.querySelector('body')
上述返回的值都是 true.
documen如下
思考二
窗体滚动事件绑定在哪里？
window ？
document ？
document.documentElement ？
document.body ？
经过测试，
document.documentElement 与 document.body 并不会触发此监听函数。
而document的监听，虽然会被触发，但是，却不能获取响应的值。
因此，对window的监听趋于完美，因此，应该在window上绑定监听。
document.addEventListener('scroll', (event) =>{
console.log('document scroll-----' + this.scrollTop);
});
window.addEventListener('scroll',function(event){
console.log('window scroll-----'+ this.pageYOffset)
});
document.documentElement.addEventListener('scroll',()=>{
console.log('document.documentElement scroll-----'+this.scrollTop)
});
document.body.addEventListener('scroll',()=>{
console.log('document body scroll-----'+this.scrollTop))
});
思考三
窗体的滚动高度的获取
window.pageYOffset
document.documentElement.scrollTop
这两个属性，都可以获取滚动高度。
建议使用 window.pageYOffset 。
思考四
Element元素的各个属性值的含义。
clientHeight 与 scrollHeight
scrollHeight 表示元素内容的高度，包括由于益处而导致视图不可见的部分，也将padding计算在内。
clientHeight 返回元元素的高度，由 padding+content 组成。
offsetHeight 返回元素的高度，由 border+padding+content 组成。
如下Demo
<div id="testDiv" style="height:100px; width: 100px; overflow: scroll; padding:10px; border:5px solid red;"> document.body的scrollWidth和scrollHeight 与 div中scrollWidth和scrollHeight是有点区别的。 document clientWidth与clientHeight 1> 该属性指的是元素的可视部分宽度和高度，即padding + content。 </div>
此时， testDivElement 的 clientHeight = 120 (100 + 2*10 )
offsetHeight = 130 ( 100 + 2*10 +2*5 )
scrollHeight = 416 (无法通过计算获取）
思考五
如何更高Body距离顶部的高度？
前面的属性都是只读属性，并不能更高，怎么更改？
使用 document.scrollingElement.scrollTop 属性，可读可写，兼容性良好。
