如何修复网站中CSS snap-align实现的水平滚动问题？

首先检查你的基础CSS配置是否正确，确保滚动容器的滚动捕捉针对X轴，且隐藏垂直滚动避免干扰：

/* 滚动容器样式 */
.scroll-container {
  scroll-snap-type: x mandatory; /* 开启X轴强制滚动捕捉 */
  overflow-x: scroll; /* 允许水平滚动 */
  overflow-y: hidden; /* 禁用垂直滚动，防止冲突 */
  display: flex; /* 子元素横向排列 */
  height: 100vh; /* 占满视口高度，保证滚动区域有效 */
}

/* 滚动子项样式 */
.scroll-item {
  scroll-snap-align: start; /* 子项与容器起始位置对齐 */
  flex: 0 0 100vw; /* 每个子项占满视口宽度 */
  height: 100%;
}

接下来解决鼠标滚轮无法触发水平滚动的问题：默认鼠标滚轮事件是垂直方向的，用一段简单JS把垂直滚动转换成水平滚动（直接复制到HTML的<script>标签里即可）：

// 获取滚动容器
const scrollContainer = document.querySelector('.scroll-container');

// 监听滚轮事件
scrollContainer.addEventListener('wheel', (event) => {
  event.preventDefault(); // 阻止默认的垂直滚动行为
  // 根据滚轮方向设置水平滚动距离（300可根据需求调整）
  scrollContainer.scrollBy({
    left: event.deltaY < 0 ? -300 : 300,
    behavior: 'smooth' // 可选，开启平滑滚动
  });
});

注意事项： #

• 确认HTML结构中所有滚动子项都嵌套在.scroll-container容器内
• 现代浏览器（Chrome、Firefox、Edge等）都支持上述CSS和JS特性，无需担心兼容性
• 如果不需要平滑滚动，可将behavior: 'smooth'替换为behavior: 'auto'或直接删除该属性

内容的提问来源于stack exchange，提问作者Düsterritter