2023年6月20日发(作者：)

scroll系列相关属性元素内容溢出 && 设置了元素的overflow属性，产⽣滚动条或超出内容被隐藏实际上，不管是滚动条还是超出内容被隐藏，这2种情况都可操作下⾯4个属性，超出内容被隐藏时，虽然没有滚动条，但是可以⽤scrollTo()这个函数来滚动元素内容，也会产⽣

scrollTop 和

scrollLeft 。属性：元素.scrollTop【元素⾃⾝滚动条】距离【元素⾃⾝上边缘】的距离（元素内容被卷出的部分）元素.scrollLeft【元素⾃⾝滚动条】距离【元素⾃⾝左边缘】的距离（元素内容被卷出的部分）元素.scrollHeight = (⼦内容⾼度) + (元素padding)= 元素css样式⾼度 + 元素padding + 元素.scrollTop的最⼤值元素.scrollWidth = (⼦内容宽度) + (元素padding)= 元素css样式宽度 + 元素padding + 元素.scrollLeft的最⼤值事件：元素.onscrollscroll 事件会在

⽂档 或

⼀个元素 滚动时触发。。。元素，滚动时触发 和

元素滚动条，滚动时触发 是⼀个意思~！（滚动条长在元素上，滚动滚动条，就是在滚动元素 ）HTML事件处理程序：DOM0级事件处理程序：ll = function() { myScript};DOM2级事件处理程序：ntListener("scroll", myScript);⽅法：元素.scrollTo(x, y)通过scrollTo()这个函数，来操作滚动条0,0 时，可做回到顶部效果...x的值即为：元素.scrollLeft的值，y的值即为：元素.scrollTop的值...x、y的值越⼤，元素内容被卷出的部分越多...注意区分：元素本⾝ 和 ⼦内容整个⽂档的滚动条：页⾯有DTD（指定了 DOCTYPE），使⽤ntElement获取；页⾯⽆DTD（没有指定 DOCTYPE），使⽤

获取。为了兼容（不管有没有 DTD）可以使⽤如下代码：var scrollTop = Top || Top;但是，监听整个⽂档的scroll事件时，却需要绑定到

window 上 。。。各浏览器对于onscroll事件的⽀持：onscroll事件的各浏览器兼容情况.png如有不妥之处，欢迎指出，共同进步！

2023年6月20日发(作者：)

scroll系列相关属性元素内容溢出 && 设置了元素的overflow属性，产⽣滚动条或超出内容被隐藏实际上，不管是滚动条还是超出内容被隐藏，这2种情况都可操作下⾯4个属性，超出内容被隐藏时，虽然没有滚动条，但是可以⽤scrollTo()这个函数来滚动元素内容，也会产⽣

scrollTop 和

scrollLeft 。属性：元素.scrollTop【元素⾃⾝滚动条】距离【元素⾃⾝上边缘】的距离（元素内容被卷出的部分）元素.scrollLeft【元素⾃⾝滚动条】距离【元素⾃⾝左边缘】的距离（元素内容被卷出的部分）元素.scrollHeight = (⼦内容⾼度) + (元素padding)= 元素css样式⾼度 + 元素padding + 元素.scrollTop的最⼤值元素.scrollWidth = (⼦内容宽度) + (元素padding)= 元素css样式宽度 + 元素padding + 元素.scrollLeft的最⼤值事件：元素.onscrollscroll 事件会在

⽂档 或

⼀个元素 滚动时触发。。。元素，滚动时触发 和

元素滚动条，滚动时触发 是⼀个意思~！（滚动条长在元素上，滚动滚动条，就是在滚动元素 ）HTML事件处理程序：DOM0级事件处理程序：ll = function() { myScript};DOM2级事件处理程序：ntListener("scroll", myScript);⽅法：元素.scrollTo(x, y)通过scrollTo()这个函数，来操作滚动条0,0 时，可做回到顶部效果...x的值即为：元素.scrollLeft的值，y的值即为：元素.scrollTop的值...x、y的值越⼤，元素内容被卷出的部分越多...注意区分：元素本⾝ 和 ⼦内容整个⽂档的滚动条：页⾯有DTD（指定了 DOCTYPE），使⽤ntElement获取；页⾯⽆DTD（没有指定 DOCTYPE），使⽤

获取。为了兼容（不管有没有 DTD）可以使⽤如下代码：var scrollTop = Top || Top;但是，监听整个⽂档的scroll事件时，却需要绑定到

window 上 。。。各浏览器对于onscroll事件的⽀持：onscroll事件的各浏览器兼容情况.png如有不妥之处，欢迎指出，共同进步！