How to scroll element horizontally, but allow vertical scrolling to scroll the entire page?

Question

I have a bunch of cards arranged horizontally. When the user hovers over them I want them to be able to scroll through the cards horizontally but if they scroll vertically I want the body to scroll.

Currently if I hover over the cards I can scroll horizontally through them but if I scroll vertically the cards swallow that event and nothing happens. I've tried capturing the event in JS and passing it up but I couldn't quite get it working.

If you look at Apple's Store page, the cards that move left-to-right are an example of what I'm trying to accomplish. https://www.apple.com/store If there's a word for this other than "carousel" please let me know. I've looked for npm packages to take care of this for me, but I can't find any that I like by searching "carousel".

Answer 1

From your question i understood that you need vertical scrollbar but no horizontal scrollbar?

For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar.

Show your css code for more proper answer

Answer 2

If I understand your question correctly you shouldn't need Javascript at all and should be able to do this with just CSS.

Here's a demo I made . Let me know how close that is to what you are trying to do.

<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;
}