如何实现元素水平滚动，同时允许垂直滚动带动整个页面？

一、组件的其他常用名称 #

除了"carousel"，这类水平滚动卡片组件还可以被称为：

• 水平滚动列表（Horizontal Scroll List）
• 横向滚动容器（Horizontal Scroll Container）
• 横向卡片流（Horizontal Card Stream）
• 滚动式卡片组（Scrollable Card Deck）

用这些关键词搜索npm包，更容易找到符合你需求的组件。

二、垂直滚动被拦截的解决方案 #

1. CSS基础设置 #

先确保容器的垂直方向不拦截滚动：

.horizontal-card-container {
  overflow-x: auto;
  overflow-y: visible; /* 关键：垂直方向不产生滚动容器 */
  scrollbar-width: none; /* 隐藏Firefox滚动条 */
}

.horizontal-card-container::-webkit-scrollbar {
  display: none; /* 隐藏Chrome/Safari滚动条 */
}

2. JavaScript事件处理 #

如果CSS设置后仍有问题，通过监听滚动事件区分方向，手动控制滚动行为：

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

// 处理鼠标滚轮事件
scrollContainer.addEventListener('wheel', (e) => {
  // 判断是否为垂直滚动（deltaY绝对值大于deltaX）
  if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
    e.preventDefault();
    // 让页面跟随垂直滚动
    window.scrollBy(0, e.deltaY);
  }
});

// 处理触摸滑动事件（适配移动端）
let startY = 0;
scrollContainer.addEventListener('touchstart', (e) => {
  startY = e.touches[0].clientY;
});

scrollContainer.addEventListener('touchmove', (e) => {
  const deltaY = e.touches[0].clientY - startY;
  // 阈值判断，避免水平滑动时误触发垂直滚动
  if (Math.abs(deltaY) > 10) {
    e.preventDefault();
    window.scrollBy(0, -deltaY); // touch滚动方向与滚轮相反，需取反
  }
});

这个方案会在用户垂直滚动时跳过容器的滚动处理，直接让页面滚动，水平滚动时则保持容器的原生滚动行为，和苹果官网的效果一致。

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