My goal is to effectively utilize the scroll-snap-type property
I'm struggling to understand why this code functions as intended
html,
body {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start none;
border: 3px dashed black;
height: 100vh;
}<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>However, the following code does not produce the desired outcome
.slider {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start none;
border: 1px dashed black;
height: 100vh;
}<div class="slider">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>I have attempted:
- Adding a height to the slider
- Changing the overflow-y
But none of these options seem to resolve the issue, and I am unsure why
The objective is to create a page with regular scrolling followed by scroll-snapping
.slider {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start none;
border: 1px solid black;
height: 100vh;
}<h2>Normal Scrolling page</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus odit laudantium esse saepe, minus eos rem! Dolor nobis saepe, exercitationem, quasi est, quia reiciendis excepturi culpa tempora perspiciatis dolorum delectus. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Repellendus odit laudantium esse saepe, minus eos rem! Dolor nobis saepe, exercitationem, quasi est, quia reiciendis excepturi culpa tempora perspiciatis dolorum delectus. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Repellendus odit laudantium esse saepe, minus eos rem! Dolor nobis saepe, exercitationem, quasi est, quia reiciendis excepturi culpa tempora perspiciatis dolorum delectus.</p>
<h2>This section below is scroll-snapping ⬇️ (or should be)</h2>
<div class="slider">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>