您当前的位置:首页 > 网站建设笔记 >

javascript scrollHeight scrollWidth scrollLeft scrollTop滚动大小

0

滚动大小指的是包含滚动内容的元素的大小。有些元素(例如<html>元素),即使没有执行任何代码也能自动地添加滚动条;但另外一些元素则需要通过CSS的overflow属性进行设置才能滚动。以下是4个与滚动大小相关的属性。

  • scrollHeight:在没有滚动条的情况下,元素内容的总高度。
  • scrollWidth:在没有滚动条的情况下,元素内容的总宽度。
  • scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
  • scrollTop:被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

scrollWidth 和 scrollHeight 主要用于确定元素内容的实际大小。例如,通常认为<html>元素是在Web浏览器的视口中滚动的元素(IE6之前版本运行在混杂模式下时是<body>元素)。因此,带有垂直滚动条的页面总高度就是 document.documentElement.scrollHeight。对于不包含滚动条的页面而言,scrollWidth 和 scrollHeight 与 clientWidthclientHeight 之间的关系并不十分清晰。在这种情况下,基于 document.documentElement 查看这些属性会在不同浏览器间发现一些不一致性问题,如下所述。

  • Firefox 中这两组属性始终都是相等的,但大小代表的是文档内容区域的实际尺寸,而非视口的尺寸。
  • Opera、Safari 3.1及更高版本、Chrome中的这两组属性是有差别的,其中 scrollWidth 和 scrollHeight 等于视口大小,而clientWidth 和 clientHeight等于文档内容区域的大小。
  • IE(在标准模式)中的这两组属性不相等,其中scrollWidth 和 scrollHeight等于文档内容区域的大小,而clientWidth 和 clientHeight等于视口大小。

在确定文档的总高度时(包括基于视口的最小高度时),必须取得 scrollWidth/clientWidth 和 scrollHeight/clientHeight 中的最大值,才能保证在跨浏览器的环境下得到精确的结果。下面就是这样一个例子了。

var docHeight = Math.max(document.documentElement.scrollHeight,
                        document.documentElement.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth,
                        document.documentElement.clientWidth);

注意,对于运行在混杂模式下的IE,则需要用 document.body 代替 document.documentElement。通过 scrollLeft 和 scrollTop 属性既可以确定元素当前滚动的状态,也可以设置元素的滚动位置。在元素尚未被滚动时,这两个属性的值都等于0。如果元素被垂直滚动了,那么scrollTop的值会大于0,且表示元素上方不可见内容的像素高度。如果元素被水平滚动了,那么scrollLeft的值会大于0,且表示元素左侧不可见内容的像素宽度。这两个属性都是可以设置的,因此将元素的 scrollLeft 和 scrollTop 设置为0,就可以重置元素的滚动位置。下面这个函数会检测元素是否位于顶部,如果不是就将其回滚到顶部。

function scrollToTop(element){
    if(element.scrollTop!=0){
        element.scrollTop=0;
    }
}

这个函数既取得了scrollTop的值,也设置了它的值。

顶部中部底部