检测页面何时滚动到 div - JavaScript (无 jQuery)

在 Web 开发中，我们经常遇到需要在页面滚动到特定元素时执行一些操作的情况。本文将介绍如何使用原生 JavaScript 监听页面滚动事件，并检测何时滚动到指定的 div 元素。

步骤 1：选择目标 div 元素

首先，我们需要选择我们要检测滚动位置的目标 div 元素。我们可以使用 document.querySelector() 方法来选择一个元素。例如，假设我们要检测滚动位置是否到达 id 为 myDiv 的 div 元素：

const targetElement = document.querySelector('#myDiv');

步骤 2：监听页面滚动事件

接下来，我们需要监听页面滚动事件。可以使用 window.addEventListener() 方法来监听页面滚动事件：

window.addEventListener('scroll', function() {
  // TODO: 实现滚动监听逻辑
});

步骤 3：实现滚动监听逻辑

滚动监听逻辑的实现过程其实非常简单。我们可以通过 targetElement.getBoundingClientRect().top 获取目标元素顶部距离视口顶部的距离，然后和 window.innerHeight (视口高度) 进行比较，即可判断目标元素是否已经滚动到视口中。例如：

const targetElement = document.querySelector('#myDiv');

window.addEventListener('scroll', function() {
  const distanceToTop = targetElement.getBoundingClientRect().top;
  
  if (distanceToTop <= window.innerHeight) {
    // 目标元素已经滚动到视口中，可以执行相关操作了
    console.log('div 元素已经滚动到视口中');
  }
});

完整代码

const targetElement = document.querySelector('#myDiv');

window.addEventListener('scroll', function() {
  const distanceToTop = targetElement.getBoundingClientRect().top;
  
  if (distanceToTop <= window.innerHeight) {
    // 目标元素已经滚动到视口中，可以执行相关操作了
    console.log('div 元素已经滚动到视口中');
  }
});

总结

这篇文章介绍了如何使用原生 JavaScript 监听页面滚动事件，并检测何时滚动到指定的 div 元素。需要注意的是，为了保证在所有浏览器上都能正常运行，我们没有使用 jQuery，而是使用了原生的 JavaScript。