滚动条的值获取与浏览器滚动高度的比较(scrollTop...)

1。在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document.body.scrollTop等属性,但是此属性在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0,如果不要此标签则一切正常,那么在xhtml页面怎么获得body的坐标呢,当然有办法-使用document.documentElement来取代document.body,可以这样写
var top = document.documentElement.scrollTop || document.body.scrollTop;
或者这样写
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;

这么写可以得到很好的兼容性。
相反,如果不做声明的话,document.documentElement.scrollTop反而会显示为0。

2。一些高度获取的值
 document.documentElement.scrollTop //滚动条距离最顶端的距离(0 ~ 文档高度减去滚动条长度)
document.documentElement.scrollLeft //滚动条的left  (一般是0)   !这两个只有Top和Left没有bottom和Right;
 document.documentElement.clientWidth // 可见区域宽度(浏览器窗口的宽)
 document.documentElement.clientHeight // 可见区域高度(浏览器窗口的高)
 document.body.clientHeight //body的 高度(文档的高度)
document.body.clientWidth //body的宽度(文档的宽度)
document.body.scrollHeight //body的高度(跟人理解为与文档高度相同)
document.body.scrollWidth //body的宽度(跟人理解为与文档宽度相同)
3.自定义滚动条时获取滚动条的高度可以这样写
scrollBarHeight = document.documentElement.clientHeight * document.documentElement.clientHeight / document.body.scrollHeight

文档是比body大的,body又比窗口大
html>body>窗口

好像记得是这样。。。

你可能感兴趣的:(滚动条的值获取与浏览器滚动高度的比较(scrollTop...))