监听页面滚动及滚动到指定位置

随着网页越来越复杂，控制网页的滚动成为了很重要的一步。在网页设计中，页面可能需要在页面滚动到相应位置后才触发动画或事件的操作，或者需要在页面滚动到某个特定位置才显示内容。为此，JS 提供了一些 API 来监视页面滚动及滚动到指定位置。

#监听页面滚动

发现页面发生滚动的最基本方法是使用 window 对象的 scroll 事件。这个事件当页面滚动的时候会触发。代码如下：

window.addEventListener('scroll', function() {
  console.log('页眉高度: ', document.documentElement.scrollTop);
})

在这个事件中也使用了 document.documentElement.scrollTop 属性。这个属性返回当前页面顶部与当前视口可见区域顶部之间的距离。当当前网页的文档（document）元素不是滚动元素时，返回的是 0。

上面代码中，当页面滚动的时候会触发一个事件，其中事件监听函数会输出页眉高度，可以自由扩展其他代码逻辑。

另外，document.body.scrollTop 属性是用来查找混杂模式下页面元素的滚动偏移量（在标准模式下，应使用 document.documentElement.scrollTop）。

但是现在很少有人使用它来查找滚动位置，而是使用新的 API：window.scrollY 或 window.pageYOffset来替代。

#滚动到指定位置

有时候我们需要滚动到某个特定位置，而不是在滚动时获取位置信息。在这种情况下，可以使用 window 对象的 scrollTo 方法和 scrollBy 方法来滚动。

scrollTo 方法

这个方法可以使页面滚动到某个绝对位置。代码如下：

window.scrollTo(0, 1000);

这个方法接受两个参数， 个参数是水平滚动量，第二个参数是垂直滚动量。在上面代码中，传递了 (0, 1000) 参数，它会将页面滚动至垂直距离为 1000 像素的位置。

scrollBy 方法

scrollBy 方法可以相对当前滚动位置滚动页面。代码如下：

window.scrollBy(0, 100);

在上面的代码中，将页面向下滚动 100 像素，如果调用 window.scrollBy(0, -100) 将页面向上滚动 100 像素。这个方法同样接受两个参数， 个参数是水平滚动量，第二个参数是垂直滚动量。

尽管 scrollTo 和 scrollBy 的功能重叠，但可以根据需要使用它们来达到不同的效果。

总结

通过scroll事件，我们可以获取网页滚动的位置。使用 scrollTo 和 scrollBy 方法可以实现页面滚动到指定位置。在开发Web 页面时，如果页面功能需要滚动操作，我们就要学会这些API。