Open hehongwei44 opened 7 years ago
最近在该方面入了坑 原文链接:http://www.cnblogs.com/zxjwlh/p/6284330.html
你好,想问你个问题,就是我页面有个元素,是可以滚动的,但是元素的scrollLeft,scrollTop始终为0,即使滚动元素,这些值依然不变,不知道您是否知道可能是什么样的原因
我也是这样,请问你解决了吗 @neal1991
@cleverboy32 解决了,但是我有点忘记了,好像是跟div width的设置有关 我有空去找找commit 当初commit message可能写的不是很清楚 :cry:
我解决了,发现取了上级不会滚动的元素去了。 @neal1991
与scroll相关的方法
4个window对象下:scrollX、scrollY、scrollTo、scroll(作用和scrollTo一样)
4个Element对象下:scrollWidth、scrollHeight、scrollLeft、scrollTop
window对象下(BOM)
window.scrollX、window.scrollY
另外旧版本(<9)对这两个属性都不支持,应该选用非标准的属性。
兼容性代码如下:(获取页面垂直和水平的滚动距离!)(复杂版)
window.scrollTo( x-coord, y-coord ) :
MDN API原文:(以左上角为坐标原点,以像素为单位沿水平和垂直方向滚动到指定位置)
不需要做兼容,可以直接用
window.scroll( x-coord, y-coord ): 作用同 window.scrollTo()
Element对象下(DOM):
scrollWidth
:只读属性,返回该元素内容区域宽度和自身宽度中较大的一个,若自身宽度大于内容宽度(存在滚动条),则scrollWidth>clientWidth.注意:该属性返回的是四舍五入后的整数值,如果需要小数,请用:
Element.getBoundingClientRect().
scrollHeight
:只读属性,返回该元素内容高度。包含被overflow隐藏掉的部分。包含padding,不包含margin.如果需要小数,请用:Element.getBoundingClientRect().
应用点:(判断元素是否滚动到底部,底下等式若返回 true ,则是,否则不是)
scrollLeft
:读取或设置元素滚动条到元素左边的距离。scrollTop:设置或获取该元素顶部距离其容器顶部的距离,无滚动条时为0。
兼容性代码如下:(获取、设置页面垂直方向的滚动距离!水平方向同理)(简易版)
总结:
由上面的两个兼容代码可以看出,我们总是把window下的scrollY(pageYoffset)、scrollX(pageXoffset)方法和element下的scrollTop、scrollLeft方法混在一起用,其实这两个是有本质区别的。一个获取的是window窗口的滚动距离,一个获取的是某一个元素的滚动距离,当获取的元素是body时,window.scrollY(window.pageYoffset) = document.body.scrollTop。
扩展:关于获取各种浏览器可见窗口大小的一点点研究
扩展:准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码: