元素滚动 scroll 系列
scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
scroll相关属性如下:
element.scrollTop; 返回被卷去的上侧距离(元素内容被卷出的部分),返回值不带单位
elemen.scrollLeft; 返回被卷去的左侧距离(元素内容被卷出的部分),返回值不带单位
elemen.scrollHeight; 返回自身实际的高度,不含边框,返回值不带单位
= (子内容高度) + (元素padding)
= 元素css样式高度 + 元素padding + 元素.scrollTop的最大值
elemen.scrollWidth; 返回自身实际的宽度,不含边框,返回值不带单位
= (子内容宽度) + (元素padding)
=元素css样式宽度 + 元素padding + 元素.scrollLeft的最大值
事件:
元素.onscroll
scroll 事件会在 文档
或 一个元素
滚动时触发。
需要注意的是,获取页面被卷去的头部高度,有兼容性问题,因此通常有如下几种写法:
- 声明了 DTD,使用 document.documentElement.scrollTop
- 未声明 DTD,使用 document.body.scrollTop
- 新方法 window.pageYOffset和 window.pageXOffset,IE9 开始支持
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
//使用的时候 getScroll().left
注意:页面滚动的距离通过 window.pageYOffset 获得