如何实现容器的左右双向水平滚动？解决direction设置无效问题

要实现双向横向滚动，不需要修改direction属性，只需确保容器开启横向滚动，内部元素宽度超出容器即可。以下是修正后的代码：

<div id="scroll" class="scroll-smooth w-[700px] h-full py-[40px] px-[3rem]" style="overflow-x: scroll; overflow-y: hidden;">
  <div class="flex items-center gap-x-[20px]" style="height: 100%;">
    <img class="item" src="https://i.imgur.com/N4sZXKq.png" alt="">
    <img class="item" src="https://i.imgur.com/N4sZXKq.png" alt="">
    <img class="item" src="https://i.imgur.com/N4sZXKq.png" alt="">
    <!-- 可添加更多图片测试滚动效果 -->
  </div>
</div>

关键调整说明： #

• 将overflow: scroll改为overflow-x: scroll; overflow-y: hidden，明确仅开启横向滚动，避免不必要的纵向滚动条
• 移除direction: rtl，保持默认ltr布局，滚动方向符合常规左右滑动逻辑
• 内部flex容器默认会让元素在一行排列，当总宽度超出容器时，自动触发横向双向滚动

如果需要无限循环双向滚动（左右滑动均能无缝循环显示内容），可搭配以下JavaScript实现：

<div id="scroll" class="scroll-smooth w-[700px] h-full py-[40px] px-[3rem] overflow-hidden" style="position: relative;">
  <div class="flex items-center gap-x-[20px]" id="scrollContent">
    <img class="item" src="https://i.imgur.com/N4sZXKq.png" alt="">
    <img class="item" src="https://i.imgur.com/N4sZXKq.png" alt="">
    <img class="item" src="https://i.imgur.com/N4sZXKq.png" alt="">
    <!-- 复制一份内容，实现循环视觉效果 -->
    <img class="item" src="https://i.imgur.com/N4sZXKq.png" alt="">
    <img class="item" src="https://i.imgur.com/N4sZXKq.png" alt="">
    <img class="item" src="https://i.imgur.com/N4sZXKq.png" alt="">
  </div>
</div>

<script>
const scrollContainer = document.getElementById('scroll');
const scrollContent = document.getElementById('scrollContent');

scrollContainer.addEventListener('scroll', () => {
  // 滚动到内容一半位置时重置滚动条，实现无缝循环
  if (scrollContainer.scrollLeft >= scrollContent.offsetWidth / 2) {
    scrollContainer.scrollLeft = 0;
  } else if (scrollContainer.scrollLeft <= 0) {
    scrollContainer.scrollLeft = scrollContent.offsetWidth / 2;
  }
});
</script>

无限循环滚动说明： #

• 容器设为overflow: hidden，隐藏超出部分
• 内部内容复制一份，总宽度翻倍
• 通过监听滚动事件，在滚动到临界位置时重置滚动条，实现双向无缝循环效果

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