To achieve horizontal scroll snap to the top of a slide, you can use CSS properties like scroll-snap-type and scroll-snap-align. These properties allow you to define the scroll snapping behavior, so the container snaps to the start of each slide when scrolling horizontally.

Here's an example of how you can implement horizontal scroll snap to the top of a slide:

HTML:

html
<div class="slide-container"> <div class="slide">Slide 1</div> <div class="slide">Slide 2</div> <div class="slide">Slide 3</div> <!-- Add more slides as needed --> </div>

CSS:

css
.slide-container { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; } .slide { flex: 0 0 100%; scroll-snap-align: start; height: 100vh; /* Adjust slide height as needed */ display: flex; justify-content: center; align-items: flex-start; font-size: 24px; padding: 20px; box-sizing: border-box; border: 1px solid #ccc; }

In this example, we create a container with the class slide-container, and each slide has the class slide. The scroll-snap-type: x mandatory; property is set on the container to enable horizontal scroll snapping. The scroll-snap-align: start; property is set on each slide to indicate that the container should snap to the start of each slide when scrolling horizontally.

The slides are placed in a flex container (display: flex) to ensure they are displayed horizontally. The slides take up the full width of the container (flex: 0 0 100%;) so that each slide occupies the entire viewport width. You can adjust the height and other styles of the slide as needed for your design.

With this CSS, when you scroll horizontally within the .slide-container, it will snap to the top of each slide as you scroll through them.

Please note that scroll snap behavior is supported in modern browsers. If you need to support older browsers, consider using a polyfill or alternative scroll snapping techniques.

Have questions or queries?
Get in Touch