JS获取滚动条位置|极客笔记

JS获取滚动条位置

在前端开发中，我们经常会遇到需要获取页面滚动条位置的情况，比如实现吸顶菜单、懒加载等功能。本文将详细介绍如何使用JavaScript获取滚动条位置的方法。

window.scrollY和window.pageYOffset

在JavaScript中，我们可以使用window.scrollY和window.pageYOffset属性来获取页面的垂直滚动条位置。

const scrollY = window.scrollY || window.pageYOffset;
console.log(scrollY); // 打印输出当前页面的垂直滚动条位置

这两个属性的作用是相同的，都用来获取页面的垂直滚动条位置。但是需要注意的是，window.scrollY在IE不支持，而window.pageYOffset在所有浏览器中都支持。

document.documentElement.scrollTop和document.body.scrollTop

除了window.scrollY和window.pageYOffset外，我们还可以使用document.documentElement.scrollTop和document.body.scrollTop来获取页面的垂直滚动条位置。这两个属性分别表示文档根元素（html元素）和body元素的滚动偏移量。

const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop); // 打印输出当前页面的垂直滚动条位置

需要注意的是，document.documentElement.scrollTop和document.body.scrollTop在不同浏览器中的表现可能不同，需要根据实际情况进行判断和使用。

监听滚动事件

通常，我们需要在页面滚动时实时获取滚动条位置，这时可以通过监听scroll事件来实现。

window.addEventListener('scroll', function() {
  const scrollY = window.scrollY || window.pageYOffset;
  console.log(scrollY); // 打印输出当前页面的垂直滚动条位置
});

上面的代码会在页面滚动时触发scroll事件，然后获取并打印当前的垂直滚动条位置。

应用场景示例：实现吸顶菜单

下面通过一个实际的案例来展示如何使用JavaScript获取滚动条位置，并实现一个简单的吸顶菜单效果。

<!DOCTYPE html>
<html>
<head>
  <title>吸顶菜单</title>
  <style>
    .menu {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: #333;
      color: #fff;
      padding: 10px 0;
    }
    .content {
      height: 2000px;
    }
  </style>
</head>
<body>
  <div class="menu">
    我是吸顶菜单
  </div>
  <div class="content">
    页面内容
  </div>

  <script>
    window.addEventListener('scroll', function() {
      const menu = document.querySelector('.menu');
      const scrollY = window.scrollY || window.pageYOffset;
      if (scrollY > 100) {
        menu.style.backgroundColor = '#f00';
      } else {
        menu.style.backgroundColor = '#333';
      }
    });
  </script>
</body>
</html>

在上面的示例中，当页面滚动时，侦听scroll事件，并根据当前的垂直滚动条位置控制吸顶菜单的样式。当滚动高度大于100时，将菜单背景色修改为红色，否则为默认的黑色。

通过这个示例，我们不仅学习了如何使用JavaScript获取滚动条位置，还实现了一个简单的吸顶菜单效果。

总结

本文介绍了几种常用的方法来获取页面的滚动条位置，包括window.scrollY、window.pageYOffset、document.documentElement.scrollTop和document.body.scrollTop。并通过一个实际的案例展示了如何应用这些方法来实现吸顶菜单效果。