• 一、滚动大小
  • 1.1 滚动大小基本介绍
  • 1.2 滚动大小基本用途
  • 1.3 实例

参考博文：

一、滚动大小

1.1 滚动大小基本介绍

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

1.2 滚动大小基本用途

• 用途：确定元素内容的实际大小。

• 在确定文档的总高度时（包括基于视口的最小高度时），必须取得 scrollWidth/clientWidth 和 scrollHeight/clientHeight 中的最大值，才能保证在跨浏览器的环境下得到精确的结果。

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

1.3 实例

• 通过 scrollLeft 和 scrollTop 属性既可以确定元素当前滚动的状态，也可以设置元素的滚动位置。
  • 在元素尚未被滚动时，这两个属性的值都等于 0。
  • 如果元素被垂直滚动了，那么 scrollTop 的值会大于 0，且表示元素上方不可见内容的像素高度。
  • 如果元素被水平滚动了，那么 scrollLeft 的值会大于 0，且表示元素左侧不可见内容的像素宽度。
• 检测元素是否位于顶部，如果不是就将其回滚到顶部。

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