JS onscroll 事件 - Javascript

JavaScript 中的 onscroll 事件是当页面滚动条滚动时被触发的事件。它可以用于实现滚动加载、滚动吸顶、滚动懒加载等功能。下面就来介绍一下如何使用 onscroll 事件。

使用方法

使用 onscroll 事件可以通过以下两种方式：

HTML 属性

在 HTML 元素上直接添加 onscroll 属性，并设置对应的事件处理函数即可。例如：

<div onscroll="handleScroll()">
  <!-- 此处为滚动内容 -->
</div>

JavaScript 代码

在 JavaScript 代码中添加事件监听器来监听 onscroll 事件，同时指定对应的事件处理函数。例如：

const element = document.getElementById('scrollable');

element.onscroll = function() {
  // 处理函数
}

注意事项

使用 onscroll 事件需注意以下几点：

• onscroll 事件只能应用于可滚动的元素（如 <div>、<iframe> 和 <textarea> 等），而不能应用于非滚动元素（如 <p> 或 <span> 等）。
• onscroll 事件在页面滚动过程中会频繁触发，因此需要慎重处理，以避免页面性能问题。
• 在某些浏览器中，onscroll 事件可能会在滚动到页面底部或顶部时触发两次（或多次），因此需要注意判断和去重处理。

示例

下面是一个实现滚动加载的示例代码片段，使用了 onscroll 事件来监听滚动事件，同时实现了列表数据的异步加载和添加：

let page = 0;
const limit = 10;
let loading = false;

window.onscroll = function() {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;

  if (scrollTop + clientHeight >= scrollHeight && !loading) {
    loading = true;

    fetch(`https://api.example.com/items?page=${page}&limit=${limit}`)
      .then(response => response.json())
      .then(data => {
        const items = data.items;

        if (items.length > 0) {
          for (let i = 0; i < items.length; i++) {
            const item = items[i];
            const listItem = document.createElement('li');
            listItem.textContent = item.title;
            document.getElementById('list').appendChild(listItem);
          }

          page++;
        }
      })
      .finally(() => {
        loading = false;
      });
  }
};

以上代码会监听页面滚动事件，当滚动到页面底部时，会向后端请求下一页列表数据，并将新数据添加到列表中。在请求过程中，loading 标志会被设置为 true，以避免出现重复请求的问题。