浏览器滚动api相关操作

窗口的 width/height

获取窗口（window）的宽度和高度，（不包括 工具栏和滚动条）

• 1：chrome window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度
• 2： Internet Explorer 8、7、6、5 document.documentElement.clientHeight || document.body.clientHeight - 浏览器窗口的内部高度 document.documentElement.clientWidth || ocument.body.clientWidth - 浏览器窗口的内部宽度

兼容写法：

const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
const height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

注意：如果存在一个滚动条，并且滚动条占用了一些空间，那么 clientWidth/clientHeight 会提供没有滚动条（减去它）的 width/height。换句话说，它们返回的是可用于内容的文档的可见部分的 width/height。 window.innerWidth/innerHeight 包括了滚动条。

window.innerWidth  // 整个窗口的宽度
document.documentElement.clientWidth // 减去滚动条宽度后的窗口宽度

ps: 包含工具栏可以使用 window.screen 获取 width 和 height

文档的 width/height

从理论上讲，由于根文档元素是 document.documentElement，并且它包围了所有内容，因此我们可以通过使用 documentElement.scrollWidth/scrollHeight 来测量文档的完整大小。

但是在该元素上，对于整个文档，这些属性均无法正常工作。在 Chrome/Safari/Opera 中，如果没有滚动条，documentElement.scrollHeight 甚至可能小于 documentElement.clientHeight！很奇怪，对吧？

为了可靠地获得完整的文档高度，我们应该采用以下这些属性的最大值：

// 全高，包括滚动部分
const fullHeight = Math.max(
  document.body.scrollHeight,
  document.documentElement.scrollHeight,
  document.body.offsetHeight,
  document.documentElement.offsetHeight,
  document.body.clientHeight,
  document.documentElement.clientHeight
)

// 全宽，包括滚动部分
const fullWidth = Math.max(
  document.body.scrollWidth,
  document.documentElement.scrollWidth,
  document.body.offsetWidth,
  document.documentElement.offsetWidth,
  document.body.clientWidth,
  document.documentElement.clientWidth
)

获得当前滚动

在大多数浏览器中，我们可以使用 document.documentElement.scrollLeft/scrollTop，但在较旧的基于 WebKit 的浏览器中则不行，例如在 Safari（bug 5991）中，我们应该使用 document.body 而不是 document.documentElement。

现在我们可以直接使用新的属性：window.pageXOffset/pageYOffset ps： window.pageXOffset 是 window.scrollX 的别名。 window.pageYOffset 是 window.scrollY 的别名

alert('当前已从顶部滚动：' + window.pageYOffset);
alert('当前已从左侧滚动：' + window.pageXOffset);

滚动：scrollTo，scrollBy，scrollIntoView

scrollTo

window.scrollBy(x-coord, y-coord);

方法 scrollTo(pageX,pageY) 将页面滚动至 绝对坐标，使得可见部分的左上角具有相对于文档左上角的坐标 (pageX, pageY)。就像设置了 scrollLeft/scrollTop 一样。

scrollBy

window.scrollBy(x-coord, y-coord);

scrollIntoView

方法 `scrollBy(x,y)` 将页面滚动至 相对于当前位置的 (x, y) 位置。例如，`scrollBy(0,10)` 会将页面向下滚动 10px。
element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean 型参数
element.scrollIntoView(scrollIntoViewOptions); // Object 型参数

对 elem.scrollIntoView(top) 的调用将滚动页面以使 elem 可见。它有一个参数：

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

总结

• 窗口（window）的宽度和高度

const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
const height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

• 文档的 width/height

// 全高，包括滚动部分
const fullHeight = Math.max(
  document.body.scrollHeight,
  document.documentElement.scrollHeight,
  document.body.offsetHeight,
  document.documentElement.offsetHeight,
  document.body.clientHeight,
  document.documentElement.clientHeight
)

// 全宽，包括滚动部分
const fullWidth = Math.max(
  document.body.scrollWidth,
  document.documentElement.scrollWidth,
  document.body.offsetWidth,
  document.documentElement.offsetWidth,
  document.body.clientWidth,
  document.documentElement.clientWidth
)

• 当前的滚动

alert('当前已从顶部滚动：' + window.pageYOffset);
alert('当前已从左侧滚动：' + window.pageXOffset);

• 更改当前的滚动 window.scrollTo(pageX,pageY) — 绝对坐标， window.scrollBy(x,y) — 相对当前位置进行滚动， elem.scrollIntoView(top) — 滚动以使 elem 可见（elem 与窗口的顶部/底部对齐）。