window的大小和滚动

Yang大约 2 分钟

窗口的宽高

documentELement.clientWidth：获取窗口可视区域宽度（不包括滚动条）
documentElement.clientHeight：获取窗口可视区域高度（不包括滚动条）
window.innerWidth：获取窗口可视区域宽度（包括滚动条）
window.innerHeight：获取窗口可视区域高度（包括滚动条）

为了可靠的获取完整的最大高度，应该去下面这些属性的最大值，以避免过于老旧浏览器的兼容问题

let scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
)
console.log('Full document height, with scrolled out part: ' + scrollHeight);

获取当前滚动

window.scrollX、window.scrollY 用来获取滚动偏移量
window.pageXOffset、window.scrollYOffset 分别是前两个的别名

console.log(window.scrollX, window.pageXOffset)
console.log(window.scrollY, window.pageYOffset)

滚动方法

scrollBy(x,y)

将页面滚动至 相对于当前位置的 (x, y) 位置，例如，scrollBy(0,10) 会将页面向下滚动 10px。

window.scrollBy(0, 10)

scrollTo(pageX,pageY)

将页面滚动至 绝对坐标，使得可见部分的左上角具有相对于文档左上角的坐标 (pageX, pageY)。就像设置了 scrollLeft/scrollTop 一样，要滚动到最开始，我们可以使用 scrollTo(0,0)

window.scrollTo(pageX, pageY)

scrollIntoView(top)

对 elem.scrollIntoView(top) 的调用将滚动页面以使 elem 可见

如果 top=true（默认值），页面滚动，使 elem 出现在窗口顶部。元素的上边缘将与窗口顶部对齐。
如果 top=false，页面滚动，使 elem 出现在窗口底部。元素的底部边缘将与窗口底部对齐

<button onclick="this.scrollIntoView()">this.scrollIntoView()</button>
<button onclick="this.scrollIntoView(false)">this.scrollIntoView(false)</button>

禁止/恢复滚动

可以使用相同的技术来冻结其他元素的滚动，而不仅仅是 document.body
缺点是会使滚动条消失。如果滚动条占用了一些空间，它原本占用的空间就会空出来，那么内容就会“跳”进去以填充它
- 可以在 document.body 中滚动条原来的位置处通过添加 padding，来替代滚动条，这样这个问题就解决了。保持了滚动条冻结前后文档内容宽度相同

// 禁止滚动
document.body.style.overflow = 'hidden'

// 恢复滚动
document.body.style.overflow = ''

elementFromPoint(x, y)

返回在窗口坐标 (x, y) 处嵌套最多的元素

只对在可见区域内的坐标 (x,y) 起作用，对于在窗口之外的坐标，elementFromPoint 返回 null

let elem = document.elementFromPoint(x, y)

// 例：高亮显示并输出现在位于窗口中间的元素的标签
let centerX = document.documentElement.clientWidth / 2;
let centerY = document.documentElement.clientHeight / 2;
let elem = document.elementFromPoint(centerX, centerY);
elem.style.background = "red";
alert(elem.tagName);

注意

可以通过更改 scrollTop/scrollLeft 来滚动常规元素，可以使用 document.documentElement.scrollTop/scrollLeft 对页面进行相同的操作（ Safari 除外，而应该使用 document.body.scrollTop/Left 代替）