A horizontal snap scroll container
This type of side scrolling container can be achieved with no JavaScript at all, but your mileage may vary.
Hello! Scroll to the right. →
Nice work! Keep going.
To achieve this side scrolling effect, place this css onto a container.
.scroll-container {
display: flex;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
gap: 1rem;
height: max-content;
margin-block: 1rem;
padding-block: 1rem;
-webkit-overflow-scrolling: touch;
overflow-x: auto;
overflow-y: hidden;
}
You'll notice that the visual success of this technique is quite dependant on how nice your scrollbar looks. Scrollbar defaults depend on your browser and operating system.
You may want to consider setting any direct child element's widths to very close the screen size.
.scroll-subcontainer {
position: relative;
flex-basis: 90%;
min-width: 80%;
height: 80vh;
scroll-snap-align: center;
border-radius: 1.6rem;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 3rem;
padding: 2px;
}
Design considerations (1)
- Because on platforms like iOS and MacOS where scroll bars are subtle, you will want to make it painfully obvious the container can be scrolled.
- As is, this is not a great pattern for users with low motor control.
- This is more convenient on mobile devices or using a track pad than when using a mouse.