码迷,mamicode.com
首页 > 其他好文 > 详细

元素scroll系列属性

时间:2020-05-31 13:10:07      阅读:377      评论:0      收藏:0      [点我收藏+]

标签:返回   info   通过   边框   数值   元素   span   单位   滚动   

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

技术图片

scroll系列属性 作用
element.scrollTop 返回被卷上去的上侧距离,返回数值不带单位
element.scrollLeft 返回被卷上去的左侧距离,返回数值不带单位
element.scrollWidth 返回自身实际的宽度,不含边框,返回数值不带单位
element.scrollHeight 返回自身实际的高度,不含边框,返回数值不带单位

 

 

 

 

 

 

 

案例:仿淘宝固定右侧侧边栏

1.原先侧边栏是绝对定位。

2.当页面滚动到一定位置,侧边栏改为固定定位。

3.页面继续滚动,会让返回顶部显示出来。

分析:

1.需要用到页面滚动事件scroll,因为是页面滚动,所以事件源是document。

2.滚动到某个位置,就是判断页面被卷上去的上部值。

3.页面被卷上去的头部:可以通过window.pageYOffset获得

4.注意: 元素被卷上去的头部是element.scrollTop,如果是页面被卷去的头部,则是window.pageYOffset。

元素scroll系列属性

标签:返回   info   通过   边框   数值   元素   span   单位   滚动   

原文地址:https://www.cnblogs.com/guwufeiyang/p/12996960.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!