javascript 设置元素滚动大小

3. 滚动大小 最后要介绍的是滚动大小（scroll dimension），指的是包含滚动内容的元素的大小。

有些元素（例如 元素），即使没有执行任何代码也能自动地添加滚动条；但另外一些元素，则需要通过 CSS 的 overflow 属性进行设置才能滚动。以下是 4 个与滚动大小相关的属性。

 scrollHeight：在没有滚动条的情况下，元素内容的总高度。

 scrollWidth：在没有滚动条的情况下，元素内容的总宽度。

 scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。

 scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

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

 Firefox 中这两组属性始终都是相等的，但大小代表的是文档内容区域的实际尺寸，而非视口的 尺寸。  Opera、Safari 3.1 及更高版本、Chrome 中的这两组属性是有差别的，其中 scrollWidth 和 scrollHeight 等于视口大小，而 clientWidth 和 clientHeight 等于文档内容区域的大小。 图灵社区会员 StinkBC(StinkBC@gmail.com) 专享 尊重版权 324 第 12 章 DOM2 和 DOM3  IE（在标准模式）中的这两组属性不相等，其中 scrollWidth 和 scrollHeight 等于文档内 容区域的大小，而 clientWidth 和 clientHeight 等于视口大小。 图 12-3 在确定文档的总高度时（包括基于视口的最小高度时），必须取得 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 的值，也设置了它的值。

转载于:https://www.cnblogs.com/winyh/p/6923913.html