JavaScript四大家族之scroll家族

最新推荐文章于 2023-01-06 20:23:04 发布

weixin_30266829

最新推荐文章于 2023-01-06 20:23:04 发布

阅读量57

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Gxqsd/p/7337254.html

版权

javascript 元素对象拥有scroll家族主要属性：

ScrollTop:　　（被滚动条卷去的头部高度）

ScrollLeft:　　（被滚动条卷曲的左侧距离）

ScrollWidth　　（内容实际宽度：width+padding+超出盒子的宽度）

ScorllHeight　　（内容实际高度：height+padding+超出盒子的高度）

Scroll可通过元素对象的属性ScrollTop和ScrollLeft找到它。

但整个浏览器的滚动条即document的滚动条元素归属存在兼容性问题。

IE678以及其他浏览器认为整个文档对象属于document.documentElement元素的即html。

未声明DTD <!DOCTYPE html> 的浏览器认为文档对象属于document.body元素的。

所以只要找正确元素即可实现浏览器兼容。if(document.CompatMode==CSS1Compat)表示支持document.documentElement元素，else 表示支持document.body元素。

最新浏览器IE9+及其他浏览器都认为整个文档属于Window对象的，可通过Window.pageXOffset和Window.pageYOffset获得，也可以通过Window.scrollTo(x,y)将浏览器滚动条滑动到指定x,y

封装 scroll函数

 1 function scroll(element, vals) {
 2         if (element == null) {
 3             return;
 4         }
 5         if (vals == null) {
 6 
 7             return {
 8                 left: element.scrollLeft,
 9                 top: element.scrollTop
10             }
11 
12         } else {
13             element.scrollTop = vals.top;
14             element.scrollLeft = vals.left;
15         }
16     }

scroll

转载于:https://www.cnblogs.com/Gxqsd/p/7337254.html

weixin_30266829

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript四大家族之scroll家族

javascript 元素对象拥有scroll家族主要属性：ScrollTop:　　（被滚动条卷去的头部高度）ScrollLeft:　　（被滚动条卷曲的左侧距离）ScrollWidth　　（内容实际宽度：width+padding+超出盒子的宽度）ScorllHeight　　（内容实际高度：height+padding+超出盒子的高度）Scroll...
复制链接

扫一扫