如何使用 JavaScript 识别正在使用哪个元素滚动？

在开发 Web 应用过程中，我们经常需要对页面元素进行滚动操作。而有时候我们希望获知正在进行滚动的元素是哪一个，以便后续的处理。本文将介绍如何使用 JavaScript 来识别正在使用哪个元素滚动。

方法一：监听滚动事件

监听滚动事件是最常用的一种方法。在 HTML 中，每个可滚动的元素都有一个 scrollTop 属性，我们可以通过监听 scroll 事件，并根据 scrollTop 的值来判断滚动事件是由哪个元素触发的。

const allScrollEls = document.querySelectorAll('*[data-scrollable]')

allScrollEls.forEach((scrollEl) => {
  scrollEl.addEventListener('scroll', (event) => {
    console.log('Scrolled:', event.target)
  })
})

在上述代码中，我们首先使用 querySelectorAll 方法找到所有带有 data-scrollable 属性的元素，这个属性可以用来标记哪些元素是可滚动的。接着我们遍历这些元素，为每个元素添加 scroll 事件监听器。在监听器回调函数中，我们输出滚动事件触发的目标元素。

注意：在这种方法中，我们是通过监听所有带有 data-scrollable 属性的元素来实现识别哪个元素正在滚动。但是，这种方法有一个缺点，就是无法区分嵌套滚动的情况。如果页面中有一个元素包含了另一个可滚动的元素，并且这些元素都带有 data-scrollable 属性，那么当里层的元素滚动时，外层的元素也会触发 scroll 事件，导致无法准确识别。

方法二：使用 Intersection Observer API

除了对滚动事件进行监听之外，我们还可以使用 Intersection Observer API 来实现对正在滚动的元素的识别。Intersection Observer API 在判断元素是否可见时十分方便，但是它也可以用于判断元素是否在滚动。

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      console.log('Scrolling:', entry.target)
    }
  })
})

const allScrollEls = document.querySelectorAll('*[data-scrollable]')

allScrollEls.forEach((scrollEl) => {
  observer.observe(scrollEl)
})

在上述代码中，我们首先使用 IntersectionObserver 方法创建一个观察器，然后使用 querySelectorAll 方法找到所有带有 data-scrollable 属性的元素。接着我们遍历这些元素，为每个元素调用 observe 方法，将其加入观察器的监测列表中。观察器会在每个滚动元素进入或离开视窗时触发回调函数，我们在回调函数中判断当前元素是否在视窗中，如果是则输出滚动元素。

与上面的方法相比，使用 Intersection Observer API 的优点是可以准确识别哪个元素正在滚动，而且还可以避免嵌套滚动的问题。但是，它的兼容性不如监听滚动事件，需要使用 polyfill 进行兼容。

结语

本文介绍了两种方法来识别正在滚动的元素。这些方法都有各自的优缺点，你需要根据自己的需求来选择使用哪种方法。如果你的页面中有嵌套滚动的情况，建议使用 Intersection Observer API 来实现滚动元素的识别。