1、scroll概述

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

2、scroll系列属性

3、页面被卷去的头部

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。

4、页面被卷去的头部兼容性解决方案

需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

声明了 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

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

DOM系列之scroll系列相关推荐

JavaScript 之网页特效篇（offset系列、client系列、scroll系列、动画函数封装、常见网页特效）
网页特效 1.元素偏移量 offset 系列 offset 翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置可以获取 ...
CLIENT系列、OFFSET系列、SCROLL系列
一.client系列 clientWidth/clientHeight 是我们设置的宽和高加上内边距(没有边框) clientLeft/clientTop 就是我们设置的边框值二.offset ...
DOM获取元素位置的三大系列offset/scroll/client
2019独角兽企业重金招聘Python工程师标准>>> 我们使用元素.style.left在style标签中设置的样式的值都获取不到. 现在就说一下三大系列吧,首先明确documen ...
05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
31 元素滚动scroll系列
技术交流 QQ 群:1027579432,欢迎你的加入! 1.元素 scroll 系列属性使用 scroll 系列的相关属性可以动态的得到该元素的大小.滚动距离等. 2.页面被卷去的头部如果浏览器 ...
offset系列,client系列,scroll系列回顾
一 scroll系列属性 --滚动 1 scrollHeight/scrollWidth 标签内部实际内容的高度/宽度 ele.scrollHeight 有两种情况, 当内容超出盒子范围后, ...
网页特效offset、client、scroll系列属性的作用
元素偏移量 offset 系列可以动态的得到元素的位置(偏移).大小等获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度) 注意:返回的数字都不带单位 offset系列属性作用 el ...
元素滚动 scroll 系列
文章目录元素 scroll 系列属性页面被卷去的头部案例:淘宝固定右侧侧边栏页面被卷去的头部兼容性解决方案元素 scroll 系列属性 scroll 翻译过来就是滚动的,我们使用 scrol ...
scroll系列和offset系列
scroll系列和offset系列 offset系列 offsetLeft:距离左边位置的值offsetTop:距离上面位置的值offsetWidth:元素的宽,包含边框offsetHeight:元素 ...
“约见“面试官系列之各系列目录汇总（建议学习收藏）
目录 2020六月系列 Oracle从小白到大牛的刷题之路(建议收藏学习) 2020七月系列 "睡服"面试官系列第一篇之let和const命令(建议收藏学习) "睡服&q ...

DOM系列之scroll系列

文章の目录

1、scroll概述

2、scroll系列属性

3、页面被卷去的头部

4、页面被卷去的头部兼容性解决方案

写在最后

DOM系列之scroll系列相关推荐

最新文章

热门文章