你不知道的js监听滚动事件的4大技巧！干货满满！

如何监听滚动事件：JavaScript 指南

滚动事件在网页设计中扮演着至关重要的角色，它允许我们动态地响应用户的滚动行为，从而创建交互式且用户友好的体验。JavaScript 提供了强大的功能，使我们能够监听滚动事件并执行相应的操作。

基本原理

当页面滚动时，浏览器会触发一个滚动事件。我们可以使用 JavaScript 的 addEventListener() 方法来监听这个事件，并在事件处理函数中编写相应的逻辑来实现需要的功能。

window.addEventListener("scroll", function() {
  // 这里可以编写需要执行的逻辑
});

技巧

掌握以下技巧可以帮助你充分利用滚动事件监听：

1. 获取当前窗口的宽度和高度

使用 window.innerWidth 和 window.innerHeight 属性可以获取当前窗口的宽度和高度，这对于实现响应式布局非常有用。

const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

2. 获取当前页面的滚动距离

通过 window.scrollY 属性可以获取当前页面的滚动距离，这对于实现懒加载图片非常有用。

const scrollTop = window.scrollY;

3. 在事件处理函数中使用条件判断

if (scrollTop > 100) {
  // 这里可以编写需要执行的逻辑
}

这个示例代码可以用来实现吸顶效果，当页面滚动到一定距离时，固定元素就会吸附在页面顶部。

4. 利用滚动事件进行懒加载

window.addEventListener("scroll", function() {
  const images = document.querySelectorAll("img[data-src]");
  images.forEach((image) => {
    const imageTop = image.getBoundingClientRect().top;
    if (imageTop < window.innerHeight) {
      image.src = image.getAttribute("data-src");
    }
  });
});

这个示例代码可以实现懒加载图片，只有当图片进入可视范围时才会加载。

示例代码

1. 实现吸顶效果

window.addEventListener("scroll", function() {
  const navbar = document.getElementById("navbar");
  if (window.scrollY > 100) {
    navbar.classList.add("fixed-top");
  } else {
    navbar.classList.remove("fixed-top");
  }
});

2. 实现懒加载图片

window.addEventListener("scroll", function() {
  const images = document.querySelectorAll("img[data-src]");
  images.forEach((image) => {
    const imageTop = image.getBoundingClientRect().top;
    if (imageTop < window.innerHeight) {
      image.src = image.getAttribute("data-src");
    }
  });
});

常见问题解答

• 如何监听多个滚动事件？

window.addEventListener("scroll", function() {
  // 这里可以编写第一个需要执行的逻辑
});

window.addEventListener("scroll", function() {
  // 这里可以编写第二个需要执行的逻辑
});

• 如何停止监听滚动事件？

window.removeEventListener("scroll", function() {
  // 这里可以编写需要执行的逻辑
});

• 如何使用节流函数来优化滚动事件处理？

节流函数可以限制事件处理函数被调用的频率，防止在页面快速滚动时出现性能问题。

const throttle = (func, wait) => {
  let inThrottle = false;

  return function() {
    if (!inThrottle) {
      func.apply(this, arguments);
      inThrottle = true;
      setTimeout(() => {
        inThrottle = false;
      }, wait);
    }
  }
};

• 如何使用防抖函数来优化滚动事件处理？

防抖函数可以延迟事件处理函数的调用，直到滚动事件停止后才触发。

const debounce = (func, wait) => {
  let timeout;

  return function() {
    const context = this;
    const args = arguments;

    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  }
};

• 如何跨浏览器兼容监听滚动事件？

const addEvent = (element, event, listener) => {
  if (element.addEventListener) {
    element.addEventListener(event, listener, false);
  } else if (element.attachEvent) {
    element.attachEvent("on" + event, listener);
  }
};

总结

监听滚动事件是 JavaScript 中一个非常有用的技术，它使我们能够创建响应式且交互式网页。通过掌握本文介绍的技巧和示例，你可以充分利用滚动事件来增强用户体验。