图片横向无限滚动问题：自动滑动与手动滚动兼容需求

原本实现的图片无限滑动代码正常运行，但给.logos容器添加overflow-x: scroll后，无限滑动失效且无法双向滚动。需要实现图片自动滑动的同时支持手动双向滚动，两种操作互不干扰。

修改后完整代码 #

HTML

<div class="logos">
  <div class="logos-slide">
    <img src="./logos/Boss.png" />
    <img src="./logos/1.png" />
    <img src="./logos/2.png" />
    <img src="./logos/3.png" />
    <img src="./logos/4.png" />
    <img src="./logos/5.png" />
    <img src="./logos/6.png" />
    <img src="./logos/7.png" />
    <img src="./logos/8.png" />
  </div>
</div>

CSS

.logos {
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 60px 0;
  white-space: nowrap;
  position: relative;
  /* 跨浏览器隐藏滚动条 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.logos::-webkit-scrollbar {
  display: none;
}

/* 左右渐变遮罩优化视觉过渡 */
.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}
.logos:before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, transparent 100%);
}
.logos:after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, transparent 100%);
}

.logos-slide,
.logos-slide.copy {
  display: inline-block;
}

.logos-slide img {
  height: 100px;
  margin: 0 2.5px;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.75));
}

JavaScript

const logosContainer = document.querySelector('.logos');
const slide = document.querySelector('.logos-slide');
// 复制原始slide实现无限滚动基础
const copySlide = slide.cloneNode(true);
copySlide.classList.add('copy');
logosContainer.appendChild(copySlide);

let scrollInterval;
const scrollSpeed = 2; // 滚动速度，数值越大滚动越快

// 自动滚动逻辑
function startAutoScroll() {
  scrollInterval = setInterval(() => {
    // 滚动到复制slide的起始位置时，重置scrollLeft实现无缝循环
    if (logosContainer.scrollLeft >= slide.offsetWidth) {
      logosContainer.scrollLeft = 0;
    } else {
      logosContainer.scrollLeft += scrollSpeed;
    }
  }, 20);
}

// 暂停自动滚动
function stopAutoScroll() {
  clearInterval(scrollInterval);
}

// 交互事件监听：手动操作时暂停自动滚动
logosContainer.addEventListener('mouseenter', stopAutoScroll);
logosContainer.addEventListener('mouseleave', startAutoScroll);
logosContainer.addEventListener('mousedown', stopAutoScroll);
logosContainer.addEventListener('mouseup', startAutoScroll);
// 适配触摸设备
logosContainer.addEventListener('touchstart', stopAutoScroll);
logosContainer.addEventListener('touchend', startAutoScroll);

// 初始化自动滚动
startAutoScroll();

核心修改说明 #

1. 替换动画实现方式：放弃原transform动画，改用操作容器scrollLeft属性实现自动滚动，彻底解决滚动行为与动画的冲突问题。
2. 完善无限滚动逻辑：复制原始slide后，当滚动到复制内容的起始位置时重置scrollLeft，实现无缝循环效果。
3. 优化交互控制：通过监听鼠标/触摸事件，在用户手动滚动时暂停自动滚动，操作结束后恢复，确保两种操作互不干扰。
4. 修复CSS错误：移除无效的:click伪类，补充跨浏览器滚动条隐藏方案，添加渐变遮罩提升视觉体验。

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