窗口大小和滚动

浏览器窗口大小

属性	说明
document.documentElement.clientWidth	获取 html 元素 border 及其以内的宽度
document.documentElement.clientHeight	获取 html 元素 border 及其以内的高度
window.innerWidth	获取浏览器窗口的宽度
window.innerHeight	获取浏览器窗口的高度

关于 document.documentElement.clientWidth 和 window.innerWidth 的区别，前者会在窗口出现滚动条时，减去滚动条的宽度，后者则仍然是浏览器窗口实际的大小。

浏览器内容大小

由于历史原因，如果我们想要获取 DOM 树在页面中渲染出的所有内容的大小，需要像下面这样做。

const scrollWidth = Math.max(
  document.body.scrollWidth, document.documentElement.scrollWidth,
  document.body.offsetWidth, document.documentElement.offsetWidth,
  document.body.clientWidth, document.documentElement.clientWidth
);

const scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

因为对于不同的浏览器，其 document.body 和 document.documentElement 的大小可能不一样，并且它们的 scrollWidth、offsetWidth 和 clientWidth 的行为和我们之前学习的有些差异，所以取这里面的最值即可。

浏览器内容的滚动

获取滚动偏移量

属性	说明
window.pageXOffset	表示窗口内容的水平方向的滚动偏移量
window.pageYOffset	表示窗口内容的垂直方向的滚动偏移量

需要注意的是，上面的属性均为 只读属性，如果想要修改浏览器内容的滚动条可以使用下面的方法。

控制滚动

方法	说明
window.scrollTo(pageX, pageY)	让滚动条移动到绝对坐标
window.scrollBy(x, y)	让滚动条基于当前位置移动固定距离
elem.scrollIntoView(top = true: boolean)	让滚动条移动到当前元素的坐标位置

• scrollTo() 和 scrollBy() 里面传入的参数都是数值类型，单位默认为 px
• scrollIntoView() 的默认参数为 true，某个元素调用该方法时，页面滚动，使 elem 出现在窗口顶部，传入 false 则相反

important

我们可以通过修改 document.documentElement.scrollTop/scrollLeft 对页面进行相同的操作（Safari 除外，而应该使用 document.body.scrollTop/Left 代替）。

禁止滚动

要使文档不可滚动，只需要设置 document.body.style.overflow = "hidden"。该页面将“冻结”在其当前滚动位置上。如果要恢复，则设置 document.body.style.overflow = "" 即可。