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

93ze6v8z 于 2023-01-14 发布在其他

关注(0)|答案(2)|浏览(223)

我有一堆水平排列的卡片。当用户悬停在它们上面时，我希望它们能够水平滚动卡片，但如果它们垂直滚动，我希望身体滚动。
目前，如果我把鼠标悬停在卡片上，我可以水平滚动它们，但如果我垂直滚动，卡片会吞下该事件，什么也不会发生。我曾尝试在JS中捕获该事件并将其传递，但我无法让它工作。
如果你看看苹果商店的页面，从左到右移动的卡片就是我想要完成的一个例子。https://www.apple.com/store如果除了“carousel”之外还有其他词可以形容这个，请告诉我。我已经找过npm软件包来帮我处理这个问题，但是我在搜索“carousel”时找不到任何我喜欢的。

css

来源：https://stackoverflow.com/questions/75112129/how-to-scroll-element-horizontally-but-allow-vertical-scrolling-to-scroll-the-e

2条答案

按热度按时间

cnwbcb6i1#

如果我理解你的问题正确，你应该不需要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;
}

赞(0）回复(0）举报 2023-01-14

czq61nw12#

从你的问题，我理解你需要垂直滚动条，但没有水平滚动条？
对于垂直滚动条，使用x和y轴。设置溢出-x：隐藏;和溢出-y：自动;这将自动隐藏水平滚动条，只显示垂直滚动条。
显示您的css代码以获得更正确的答案

赞(0）回复(0）举报 2023-01-14