JS 滚动条滚动事件|极客笔记

JS 滚动条滚动事件

在网页开发中，经常会遇到需要监听页面滚动事件的情况，比如实现页面滚动时导航栏的固定、滚动到底部加载更多内容等功能。而 JavaScript 提供了滚动条滚动事件，可以通过监听该事件来实现相关功能。本文将详细介绍如何使用 JavaScript 监听滚动条滚动事件，并给出一些实际应用场景的示例。

监听滚动条滚动事件

在 JavaScript 中，我们可以使用 addEventListener 方法来监听滚动条滚动事件。具体代码如下：

window.addEventListener('scroll', function() {
  // 在这里编写滚动事件触发时的处理逻辑
});

上面的代码中，addEventListener 方法接受两个参数，第一个参数是要监听的事件类型，这里是 scroll，表示滚动条滚动事件；第二个参数是一个回调函数，当滚动事件发生时会执行这个回调函数。在回调函数中，我们可以编写处理滚动事件的逻辑。

获取滚动条位置

在处理滚动事件时，通常需要获取滚动条的位置来判断用户滚动的位置。我们可以通过 window.scrollY 或 document.documentElement.scrollTop 来获取滚动条的垂直位置。具体代码如下：

window.addEventListener('scroll', function() {
  var scrollTop = window.scrollY || document.documentElement.scrollTop;
  console.log('滚动条垂直位置：' + scrollTop);
});

上面的代码中，window.scrollY 是获取文档在垂直方向已滚动的像素值，如果浏览器不支持，则使用 document.documentElement.scrollTop 来获取。

示例应用场景

固定导航栏

一个常见的应用场景是在页面滚动时固定导航栏，使其始终在页面顶部显示。我们可以通过监听滚动条滚动事件，判断滚动的位置来控制导航栏的样式。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定导航栏</title>
<style>
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
    transition: top 0.2s;
  }

  .content {
    height: 2000px;
  }
</style>
</head>
<body>
<div class="nav">导航栏</div>
<div class="content"></div>
<script>
  var nav = document.querySelector('.nav');
  var lastScrollTop = 0;

  window.addEventListener('scroll', function() {
    var scrollTop = window.scrollY || document.documentElement.scrollTop;
    if (scrollTop > lastScrollTop) {
      nav.style.top = '-50px';
    } else {
      nav.style.top = '0';
    }
    lastScrollTop = scrollTop;
  });
</script>
</body>
</html>

在上面的示例中，当滚动条向下滚动时，导航栏会隐藏；当滚动条向上滚动时，导航栏会显示在页面顶部。

懒加载图片

另一个常见的应用场景是在滚动到页面底部时加载更多内容，比如懒加载图片。我们可以通过监听滚动条滚动事件，判断页面是否滚动到底部来加载更多内容。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>懒加载图片</title>
<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px;
  }

  .item {
    width: 200px;
    margin: 10px;
  }
</style>
</head>
<body>
<div class="container" id="container"></div>
<script>
  var container = document.getElementById('container');
  var page = 1;

  function getData() {
    // 模拟获取数据
    var data = Array.from({ length: 5 }, (_, index) => ({
      id: page * 5 + index,
      src: `https://via.placeholder.com/200?text=Image ${page * 5 + index}` })); return Promise.resolve(data); } function appendData(data) { data.forEach(item => { var img = document.createElement('img'); img.src = item.src; img.alt = `Image$ {item.id}`;
      img.className = 'item';
      container.appendChild(img);
    });
  }

  getData().then(appendData);

  window.addEventListener('scroll', function() {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
      page++;
      getData().then(appendData);
    }
  });
</script>
</body>
</html>

上面的示例中，当滚动到页面底部时会加载更多图片，实现了懒加载的效果。