06
2018
12

JS中scroll滚动详解

js中scroll滚动相关

scroll,滚动,一般讨论的是网页整体与浏览器之间的关系。

一、元素相关

属性/方法                                     解释

element.scrollHeight             返回元素的整体高度。

element.scrollWidth             返回元素的整体宽度。

element.scrollLeft                     返回元素左边缘与视图之间的距离。

element.scrollTop                     返回元素上边缘与视图之间的距离。

这四个属性,全部是只读属性

其中,无非就是分为宽高和左上。

两个方向。

1、scrollHeight 和 scrollWidth

使用scrollHeight和scrollWidth属性返回元素的高度,单位为px,包括padding

scrollHeight 和 scrollWidth返回的数值是包括当前不可见部分的。

scrollHeight 和 scrollWidth 属性为只读属性

2、scrollLeft 和 scrollTop

需要一个监听方法

还存在浏览器兼容问题

二、窗口相关

1、window对象的scrollBy() 和scrollTo()

1、scrollBy(x,y)

scrollBy(x,y)方法滚动当前window中显示的文档,x和y指定滚动的相对量。

scrollBy(0, 200) ==> 使得滚动条Y轴的位置,在当前的基础上增加200。比如:当前Y轴位置为0,执行后便是200;当前为100,执行后便是300。

要使此方法工作 window 滚动条的可见属性必须设置为true!

2、scrollTo(x,y)

scrollTo(xpos,ypos)

xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。

ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标。

scrollTo(x,y)方法:滚动当前window中显示的文档,让文档中由坐标x和y指定的点位于显示区域的

原文链接:https://www.qiquanji.com/post/8745.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。