js 监听元素滚动|极客笔记

js 监听元素滚动

在网页开发中，经常会遇到需要监听页面元素滚动的需求。比如当用户滚动页面某个区域时，实现某些效果或触发某些事件。本文将详细介绍如何使用 JavaScript 监听元素的滚动事件，并给出一些实际应用的示例。

监听元素滚动事件

要监听元素的滚动事件，我们首先需要获取要监听的元素，然后通过 addEventListener 方法来绑定 scroll 事件。当元素被滚动时，就会触发该事件，从而执行我们预先设置好的处理函数。

以下是一个简单的示例，当页面中 #container 元素被滚动时，在控制台输出滚动的距离：

<div id="container" style="height: 200px; overflow: scroll;">
    <!-- 这里放置滚动内容 -->
</div>

<script>
const container = document.getElementById('container');
container.addEventListener('scroll', function() {
  console.log('滚动距离：', container.scrollTop);
});
</script>

在上面的示例中，我们用一个 div 元素模拟了一个可以滚动的容器，并绑定了滚动事件。当用户滚动该容器时，会在控制台输出滚动的距离。

实际应用示例

懒加载图片

懒加载是一种优化网页性能的常见手段，可以延迟加载页面中的图片，只有当用户滚动到图片位置时才加载图片内容。下面是一个简单的图片懒加载实现：

<div id="container" style="height: 800px; overflow: scroll;">
    <img data-src="image1.jpg" alt="Image 1">
    <img data-src="image2.jpg" alt="Image 2">
    <!-- 更多图片 -->
</div>

<script>
const container = document.getElementById('container');
const images = document.querySelectorAll('img[data-src]');

function lazyLoad() {
  images.forEach(img => {
    if (img.offsetTop < container.clientHeight + container.scrollTop) {
      img.src = img.getAttribute('data-src');
      img.removeAttribute('data-src');
    }
  });
}

container.addEventListener('scroll', lazyLoad);
lazyLoad(); // 初始加载一次
</script>

在上面的示例中，我们先将所有需要懒加载的图片添加了 data-src 属性保存真实的图片地址，并通过监听容器滚动事件，判断图片是否进入可视区域来加载图片。

无限滚动列表

无限滚动列表是一种常见的交互方式，用户滚动页面时自动加载更多内容，通常用于展示大量数据的列表。下面是一个简单的无限滚动列表实现：

<div id="container" style="height: 400px; overflow: scroll;">
    <ul id="list">
        <!-- 初始展示的列表项 -->
        <li>Item 1</li>
        <li>Item 2</li>
        <!-- 更多列表项 -->
    </ul>
</div>

<script>
const container = document.getElementById('container');
const list = document.getElementById('list');

function loadMore() {
  for (let i = 0; i < 10; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${list.children.length + 1}`;
    list.appendChild(li);
  }
}

container.addEventListener('scroll', function() {
  if (container.scrollTop + container.clientHeight >= list.clientHeight) {
    loadMore();
  }
});

loadMore(); // 初始加载一次
</script>

在上面的示例中，当用户滚动到列表底部时，会加载更多内容。我们通过比较容器滚动的距离和列表总高度来触发加载更多数据的函数。