如何为水平溢出容器实现鼠标滚轮左右滚动效果？

首先明确：overscroll-x属性是控制容器溢出滚动时的边界行为（比如弹性回弹效果），并不能实现将垂直滚轮操作转换为水平滚动的功能，你之前的理解确实有偏差。下面是两种可行的解决方案：

方案一：JavaScript 监听滚轮事件（兼容性最优） #

通过监听容器的wheel事件，把垂直滚动的偏移量映射为水平滚动的距离，这是目前最通用的实现方式。

代码示例 #

HTML 结构

<div class="horizontal-scroll-container">
  <div class="scroll-content">
    <!-- 你的横向内容，比如多个卡片、长表格等 -->
  </div>
</div>

CSS 样式

.horizontal-scroll-container {
  width: 100%;
  overflow-x: auto; /* 开启水平溢出滚动 */
  white-space: nowrap; /* 确保内部元素不换行 */
  /* 可选：隐藏原生滚动条 */
  scrollbar-width: none; /* 适配 Firefox */
}
/* 适配 Chrome、Safari、Edge */
.horizontal-scroll-container::-webkit-scrollbar {
  display: none;
}

.scroll-content {
  display: inline-block;
  width: 2200px; /* 示例宽内容，实际根据你的需求设置 */
  height: 350px;
  background: linear-gradient(90deg, #f5f5f5, #e0e0e0);
}

JavaScript 逻辑

const scrollContainer = document.querySelector('.horizontal-scroll-container');

scrollContainer.addEventListener('wheel', (event) => {
  event.preventDefault(); // 阻止页面默认的垂直滚动行为
  // 将滚轮垂直偏移量转为水平滚动距离，系数1.5可调整滚动速度
  scrollContainer.scrollLeft += event.deltaY * 1.5;
});

关键说明 #

• event.deltaY代表滚轮垂直滚动的增量：向下滚动为正，向上为负
• 调整1.5这个系数可以控制水平滚动的快慢，数值越大滚动越快
• 如果容器内部有其他可滚动元素，可添加event.stopPropagation()避免事件冲突

方案二：CSS 滚动增强（仅现代浏览器支持） #

如果仅需要适配 Chrome、Firefox 等现代浏览器，可以搭配scroll-behavior: smooth让滚动更顺滑，但核心的滚轮方向转换仍需要依赖上述 JavaScript 逻辑：

.horizontal-scroll-container {
  scroll-behavior: smooth; /* 开启平滑滚动 */
}

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