如何识别Horizontal Slider（水平滚动滑块）视口中的当前元素？

我有一个带水平滚动滑块的容器，现在想识别当前处于视口中的幻灯片元素。之前尝试通过元素的left属性、将幻灯片存入数组后检查X轴位置的方法，但都遇到了瓶颈。以下是我的滚动函数及相关代码：

原代码 #

JavaScript #

const scroll = () => {
  const scrollContainer = document.querySelector('.slider');

  scrollContainer.addEventListener('wheel', (e) => {
    e.preventDefault();
    scrollContainer.scrollLeft += e.deltaY;
  });
};

HTML #

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>demo</title>
  <style>
    /* 补充基础样式让滑块正常工作 */
    .slider {
      width: 100%;
      overflow-x: auto;
      white-space: nowrap;
      padding: 10px 0;
    }
    .innerSlider {
      display: inline-flex;
      gap: 10px;
    }
    .slide {
      width: 300px;
      height: 200px;
      flex-shrink: 0;
    }
    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class="slider" id="slideshowContainer">
    <div class="innerSlider" id="innerSlider">
      <div class="slide">
        <img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=958&q=80" alt="" draggable="false" />
      </div>
      <div class="slide">
        <img src="https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="" draggable="false" />
      </div>
      <div class="slide">
        <img src="https://images.unsplash.com/photo-1586105251261-72a756497a11?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=958&q=80" alt="" draggable="false" />
      </div>
      <div class="slide">
        <img src="https://images.unsplash.com/photo-1618220048045-10a6dbdf83e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="" draggable="false" />
      </div>
      <div class="slide">
        <img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" />
      </div>
      <div class="slide">
        <img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" draggable="false" />
      </div>
      <div class="slide">
        <img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" draggable="false" />
      </div>
    </div>
  </div>
</body>

</html>

解决方案：使用getBoundingClientRect()检测视口元素 #

通过getBoundingClientRect()获取元素相对于视口的位置，结合滚动容器的视口范围，判断元素是否处于视口中（可自定义可见阈值）。修改后的代码如下：

const scroll = () => {
  const scrollContainer = document.querySelector('.slider');
  const slides = Array.from(document.querySelectorAll('.slide'));

  // 检测并标记视口中的幻灯片
  const checkVisibleSlides = () => {
    const containerRect = scrollContainer.getBoundingClientRect();
    // 清除之前的激活状态
    slides.forEach(slide => slide.classList.remove('active'));

    slides.forEach(slide => {
      const slideRect = slide.getBoundingClientRect();
      // 计算元素与容器视口的重叠宽度
      const overlapStart = Math.max(slideRect.left, containerRect.left);
      const overlapEnd = Math.min(slideRect.right, containerRect.right);
      const overlapWidth = overlapEnd - overlapStart;

      // 当元素至少50%宽度在视口中时，标记为激活
      if (overlapWidth >= slideRect.width * 0.5) {
        slide.classList.add('active');
        // 这里可以添加自定义逻辑，比如记录当前激活的幻灯片
        console.log('当前视口中的幻灯片:', slide);
      }
    });
  };

  // 滚轮滚动事件
  scrollContainer.addEventListener('wheel', (e) => {
    e.preventDefault();
    scrollContainer.scrollLeft += e.deltaY;
    // 滚动后立即检测
    checkVisibleSlides();
  });

  // 初始加载时检测一次
  checkVisibleSlides();
};

// 初始化滚动功能
scroll();

补充样式（标记激活状态） #

在<style>中添加：

.slide.active {
  outline: 3px solid #2196F3;
  border-radius: 4px;
}

逻辑说明 #

• getBoundingClientRect()返回元素的left、right、width等属性，直接对应元素在视口中的位置
• 通过计算元素与滚动容器视口的重叠宽度，判断元素是否足够可见（这里设置为50%，可根据需求调整为100%完全可见或其他阈值）
• 在滚动事件触发后和页面初始加载时，都调用检测函数，保证状态实时更新

内容的提问来源于stack exchange，提问作者nontraditionalDev