What can be done with scroll-snap-type

user_15335954 0
Viewed 112

What I'm am trying to do is to use the scroll-snap-type property properly

I don't quite get why this code works

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>

But this one doesn't

.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 tried :

  • Adding a height to the slider
  • Changing the overflow-y

But none of the below option seems to work, I really don't understand why is it so

Because What I'm trying to achieve is a page with normal scroll then scroll-snap

.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>

scroll css html
2 Answers

The height on the container is not enough: you need to also set overflow-y: scroll

* { padding: 0; margin: 0}

.slider {
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow-y: scroll;
}

.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>

Furthermore, if you want to always stop the scroll on each slide also add scroll-snap-stop: always; for the .child elements

* { padding: 0; margin: 0}

.slider {
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow-y: scroll;
}

.child {
  scroll-snap-align: start none;
  scroll-snap-stop: always;
  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>

user_10988510

Because scrollbar (or overflown element) in both cases is <html>

Putting scrollbar on .slider it changes behaviour:

.slider {
  scroll-snap-type: y mandatory;
  max-height: 200px;
  overflow: auto;
}

.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>

user_13462340
Related