如何水平滚动元素，但允许垂直滚动滚动整个页面？答案

【问题标题】：How to scroll element horizontally, but allow vertical scrolling to scroll the entire page?如何水平滚动元素，但允许垂直滚动滚动整个页面？
【发布时间】：2023-01-17 02:39:45
【问题描述】：

我有一堆水平排列的卡片。当用户将鼠标悬停在上面时，我希望他们能够水平滚动卡片，但如果他们垂直滚动，我希望正文滚动。

目前，如果我将鼠标悬停在卡片上，我可以水平滚动它们，但如果我垂直滚动，卡片会吞没该事件，并且什么也不会发生。我试过在 JS 中捕获事件并将其传递出去，但我无法让它正常工作。

如果您查看 Apple 的商店页面，从左到右移动的卡片就是我正在尝试完成的示例。 https://www.apple.com/store 如果除了“旋转木马”之外还有其他词，请告诉我。我一直在寻找 npm 包来为我处理这个问题，但我无法通过搜索“carousel”找到任何我喜欢的包。

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

如果我正确理解你的问题，你根本不需要 Javascript，只用 CSS 就可以做到。

Here's a demo I made。让我知道这与您正在尝试做的事情有多接近。

<section class="container">
  <h2>Carousel</h2>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in lorem vel dui faucibus auctor. Proin sit amet tortor libero. In sed nulla metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In urna risus, condimentum at nibh mollis, rutrum cursus quam. Sed rhoncus ac ante vitae mollis. Vestibulum maximus lorem non justo dictum ultrices. Etiam interdum, mi ut posuere iaculis, tellus quam placerat felis, sit amet vehicula est magna ut augue.</p>
</section>
<section class="carousel">
  <div class="carousel-card"></div>
  <div class="carousel-card"></div>
  <div class="carousel-card"></div>
  <div class="carousel-card"></div>
  <div class="carousel-card"></div>
  <div class="carousel-card"></div>
  <div class="carousel-card"></div>
  <div class="carousel-card"></div>
  <div class="carousel-card"></div>
  <div class="carousel-card"></div>
  <div class="carousel-card"></div>
  <div class="carousel-card"></div>
</section>
<section class="container">
  <h2>Carousel</h2>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in lorem vel dui faucibus auctor. Proin sit amet tortor libero. In sed nulla metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In urna risus, condimentum at nibh mollis, rutrum cursus quam. Sed rhoncus ac ante vitae mollis. Vestibulum maximus lorem non justo dictum ultrices. Etiam interdum, mi ut posuere iaculis, tellus quam placerat felis, sit amet vehicula est magna ut augue.</p>
</section>

:root {
  --max-width: 960px;
}

html,
body {
  margin: 0;
  padding: 0;
}

section {
  margin-top: 30px;
  margin-bottom: 30px;
}

.container {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

.carousel {
  display: flex;
  overflow: auto;
}

.carousel:before,
.carousel:after {
  content: '';
  width: calc((100vw - var(--max-width)) / 2);
  flex-shrink: 0;
}

.carousel-card {
  height: 400px;
  width: 300px;
  background-color: gray;
  border-radius: 20px;
  flex-shrink: 0;
}

.carousel-card + .carousel-card {
  margin-left: 20px;
}

【讨论】：

好的，这很有趣。我正在做与您相同的基本操作，但出于某种原因，如果我将鼠标悬停在旋转木马上，我将无法垂直滚动页面。我将尝试找出我们的方法之间的不同之处，我将很快回到这个话题。非常感谢您的回复！
我想到了。我已将 overscroll-behavior 拉入我的组件，它阻止了我预期的行为。非常感谢您的评论和代码，您为我省去了很多麻烦和一些非常丑陋的 JS hack！

【解决方案2】：

从你的问题我了解到你需要垂直滚动条但不需要水平滚动条？

对于垂直滚动条，使用 x 和 y 轴。在body上设置overflow-x: hidden;和overflow-y: auto;，会自动隐藏水平滚动条，只显示垂直滚动条。

如果你展示你的CSS，你可以获得更直接适用的答案。

【讨论】：