📌  相关文章
📜  使用 js 检查滚动位置 - Javascript (1)

📅  最后修改于: 2023-12-03 15:22:13.545000             🧑  作者: Mango

使用 JS 检查滚动位置 - JavaScript

在 Web 开发中，经常需要实现滚动页面到一定位置时触发某些事件的效果，比如滚动到底部加载更多数据，或者滚动到一定高度时固定导航栏等等。本文将介绍如何使用 JavaScript 检查页面滚动位置并触发相关事件。

获取页面滚动位置

在 JavaScript 中，通过 window.scrollY 可以获取页面当前的垂直滚动位置。如果需要获取页面水平滚动位置，可以使用 window.scrollX。可以通过以下代码获取页面垂直滚动位置并输出到控制台：

console.log(window.scrollY);
监听页面滚动事件

要实现滚动到一定位置后触发某些事件，需要在页面滚动时监听滚动事件。可以使用 window.addEventListener() 注册事件监听器，如下所示：

window.addEventListener('scroll', function() {
  console.log(window.scrollY);
});

上面的代码会在页面滚动时输出当前的垂直滚动位置到控制台。

触发滚动位置相关事件

知道了如何获取页面滚动位置和监听滚动事件后，接下来就可以根据滚动位置触发相关事件了。以下是一个示例，当页面滚动到一定位置时，在页面上显示一个“回到顶部”的按钮：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>使用 JS 检查滚动位置</title>
    <style>
      #back-to-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <h1>使用 JS 检查滚动位置</h1>
      <p>...</p>
    </div>
    <button id="back-to-top">回到顶部</button>
    <script>
      var backToTopBtn = document.getElementById('back-to-top');
      window.addEventListener('scroll', function() {
        if (window.scrollY > 200) {
          backToTopBtn.style.display = 'block';
        } else {
          backToTopBtn.style.display = 'none';
        }
      });
      backToTopBtn.addEventListener('click', function() {
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      });
    </script>
  </body>
</html>

上面的代码中，当页面的垂直滚动位置超过 200 像素时，显示“回到顶部”的按钮；否则隐藏按钮。当用户点击按钮时，使用 window.scrollTo() 方法平滑滚动到页面顶部。

这个示例只是一个简单的实现，如果需要实现更复杂的效果，可以根据具体需求进行相应的代码调整。

结束.