横向Slider无法自动滚动至下一项的技术求助

开发一款横向Slider，需求是当用户滚动到当前项末尾时，自动向右滚动至下一项。目前实现的代码无法达成预期效果，控制台无报错信息，调整过判断当前项末尾的条件仍未解决。

核心需求：用户滚动到当前项末尾时，Slider自动跳转至下一项。
疑问：不确定是否存在浏览器或设备兼容性影响该功能。

现有代码 #

JavaScript代码 #

console.log("Slider");

// Get the slider container element
const sliderContainer = document.querySelector('.slider-container');

// Get all slider item elements
const sliderItems = document.querySelectorAll('.slider-item');

// Add event listener to the slider container
sliderContainer.addEventListener('scroll', () => {
  // Get the current scroll position
  const scrollPosition = sliderContainer.scrollLeft;

  // Loop through each slider item
  sliderItems.forEach((item, index) => {
    // Check if the item is in view
    if (scrollPosition >= item.offsetLeft && scrollPosition < item.offsetLeft + item.offsetWidth) {
      // Add the active class to the item
      item.classList.add('active');
    } else {
      // Remove the active class from the item
      item.classList.remove('active');
    }

    // Check if we've reached the end of the current item
    if (scrollPosition + sliderContainer.offsetWidth >= item.offsetLeft + item.offsetWidth) {
      // Automatically scroll to the next item
      sliderContainer.scrollLeft = item.offsetLeft + item.offsetWidth;
    }
  });
});

HTML代码 #

<div class="slider-item">
  <img src="{% static './assets/images/banner-1.jpg' %}" alt="women's latest fashion sale" class="banner-img">
  <div class="banner-content">
    <p class="banner-subtitle">Trending item</p>
    <h2 class="banner-title">Women's latest fashion sale</h2>
    <p class="banner-text">
      starting at &dollar; <b>20</b>.00
    </p>
    <a href="#" class="banner-btn">Shop now</a>
  </div>
</div>

<div class="slider-item">
  <img src="{% static './assets/images/banner-2.jpg' %}" alt="modern sunglasses" class="banner-img">
  <div class="banner-content">
    <p class="banner-subtitle">Trending accessories</p>
    <h2 class="banner-title">Modern sunglasses</h2>
    <p class="banner-text">
      starting at &dollar; <b>15</b>.00
    </p>
    <a href="#" class="banner-btn">Shop now</a>
  </div>
</div>

<div class="slider-item">
  <img src="{% static './assets/images/banner-3.jpg' %}" alt="new fashion summer sale" class="banner-img">
  <div class="banner-content">
    <p class="banner-subtitle">Sale Offer</p>
    <h2 class="banner-title">New fashion summer sale</h2>
    <p class="banner-text">
      starting at &dollar; <b>29</b>.99
    </p>
    <a href="#" class="banner-btn">Shop now</a>
  </div>
</div>

CSS代码 #

.slider-container {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--border-radius-md);
  overflow-x: auto; /* Add this line */
  scroll-snap-type: inline mandatory;
  overscroll-behavior-inline: contain;
}

.slider-item {
  position: relative;
  min-width: 100%;
  max-height: 450px;
  aspect-ratio: 1 / 1;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  scroll-snap-align: start;
}

.slider-item .banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right;
}

问题根源分析 #

1. 循环遍历逻辑冲突：每次scroll事件触发时，遍历所有slider-item，每个item都会执行末尾判断，导致多个item的条件同时触发，scrollLeft被反复覆盖，无法正确定位下一项。
2. scroll事件循环触发：设置scrollLeft会再次触发scroll事件，形成无限循环，浏览器会抑制这种重复操作，导致自动滚动失效。
3. scroll-snap特性干扰：CSS中scroll-snap-type: inline mandatory的强制吸附行为优先级高于自定义滚动逻辑，会打断自动滚动操作。

解决方案 #

修改JavaScript代码，优化逻辑：添加防抖减少事件触发频率，仅针对当前激活项做判断，处理边界情况，同时可调整scroll-snap参数降低其优先级。

修改后的JavaScript代码 #

console.log("Slider");

const sliderContainer = document.querySelector('.slider-container');
const sliderItems = document.querySelectorAll('.slider-item');
let isScrolling = false; // 标记自动滚动状态，避免循环触发

// 防抖函数，降低scroll事件触发频率
function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

const handleScroll = debounce(() => {
  if (isScrolling) return;

  const scrollPosition = sliderContainer.scrollLeft;
  const containerWidth = sliderContainer.offsetWidth;
  let currentActiveIndex = -1;

  // 定位当前激活的item
  sliderItems.forEach((item, index) => {
    const itemLeft = item.offsetLeft;
    const itemWidth = item.offsetWidth;
    // 调整激活判断阈值，提升准确性
    if (scrollPosition >= itemLeft - 10 && scrollPosition < itemLeft + itemWidth - containerWidth + 10) {
      item.classList.add('active');
      currentActiveIndex = index;
    } else {
      item.classList.remove('active');
    }
  });

  if (currentActiveIndex === -1) return;

  const currentItem = sliderItems[currentActiveIndex];
  const currentItemEnd = currentItem.offsetLeft + currentItem.offsetWidth;
  const scrollEnd = scrollPosition + containerWidth;

  // 判断是否滚动到当前项末尾，且不是最后一项
  if (scrollEnd >= currentItemEnd - 10 && currentActiveIndex < sliderItems.length - 1) {
    isScrolling = true;
    // 平滑滚动到下一项起始位置
    const nextItem = sliderItems[currentActiveIndex + 1];
    sliderContainer.scrollTo({
      left: nextItem.offsetLeft,
      behavior: 'smooth'
    });
    // 滚动结束后重置状态标记
    setTimeout(() => {
      isScrolling = false;
    }, 500);
  }
}, 100);

sliderContainer.addEventListener('scroll', handleScroll);

可选CSS调整 #

若需保留scroll-snap特性，可将强制吸附改为接近吸附，减少对自定义逻辑的干扰：

.slider-container {
  /* ...其他样式 */
  scroll-snap-type: inline proximity; /* 仅在接近吸附点时触发 */
}

兼容性说明 #

• scrollTo的behavior: smooth不支持IE，如需兼容可移除该参数，使用即时滚动；
• scroll-snap特性支持Chrome 69+、Firefox 68+、Edge 79+、Safari 11.1+，兼容旧浏览器可移除scroll-snap相关样式，完全依赖JS逻辑。

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