scroll系列 相关属性

元素内容溢出 && 设置了元素的overflow属性，产生滚动条或超出内容被隐藏

实际上，不管是滚动条还是超出内容被隐藏，这2种情况都可操作下面4个属性，超出内容被隐藏时，虽然没有滚动条，但是可以用scrollTo()这个函数来滚动元素内容，也会产生 scrollTop 和 scrollLeft 。

属性：

元素.scrollTop
【元素自身滚动条】距离【元素自身上边缘】的距离（元素内容被卷出的部分）
元素.scrollLeft
【元素自身滚动条】距离【元素自身左边缘】的距离（元素内容被卷出的部分）

元素.scrollHeight = (子内容高度) + (元素padding)
= 元素css样式高度 + 元素padding + 元素.scrollTop的最大值

元素.scrollWidth = (子内容宽度) + (元素padding)
= 元素css样式宽度 + 元素padding + 元素.scrollLeft的最大值

事件：

元素.onscroll

scroll 事件会在 文档 或 一个元素 滚动时触发。。。

元素，滚动时触发 和 元素滚动条，滚动时触发 是一个意思~！（滚动条长在元素上，滚动滚动条，就是在滚动元素 ）

HTML事件处理程序：

<element onscroll="myScript">

DOM0级事件处理程序：

object.onscroll = function() {
    myScript
};

DOM2级事件处理程序：

object.addEventListener("scroll", myScript);

方法：

元素.scrollTo(x, y)
通过scrollTo()这个函数，来操作滚动条！！！
0,0 时，可做回到顶部效果...
x的值即为：元素.scrollLeft的值，y的值即为：元素.scrollTop的值...
x、y的值越大，元素内容被卷出的部分越多...

注意区分：元素本身 和 子内容

整个文档的滚动条：

页面有DTD（指定了 DOCTYPE），使用document.documentElement获取；
页面无DTD（没有指定 DOCTYPE），使用 document.body 获取。
为了兼容（不管有没有 DTD）可以使用如下代码：

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

但是，监听整个文档的scroll事件时，却需要绑定到 window 上 。。。
各浏览器对于onscroll事件的支持：

onscroll事件的各浏览器兼容情况.png
如有不妥之处，欢迎指出，共同进步！