3

I've been trying to implement a super simple horizontal snap scroll (as shown here: https://css-tricks.com/practical-css-scroll-snapping ) yet I am consistently failing at that. I've probably searched through all the questions and answers here but none was of help.

My code is very simple, I am only declaring scroll-snap-type: y mandatory; on the parent and scroll-snap-align: center; on the child. And I am pretty sure it's not a browser issue (since I've tried it with many different browsers). What am I missing here? Or what do I not understand?

Here's my (not working) CodePen: https://codepen.io/anon/pen/XyNNGY

html:

<div class='parent'>
  <div class='child'>Section 1</div>
  <div class='child two'>Section 2</div>
  <div class='child'>Section 3</div>
</div>

css:

  body {
    margin: 0;
  }

  .parent {
    scroll-snap-type: y mandatory;
  }

  .child {
    scroll-snap-align: center;
    width: 100vw;
    height: 100vh;
    background-color: pink;
  }

  .two {
    background-color: crimson;
  }

Thanks a million already.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
selmanbey
  • 318
  • 1
  • 8

2 Answers2

1

Try it like this.

body {
  margin: 0;
}

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

.child {
  scroll-snap-align: center;
  height: 100vh;
  background-color: pink;
}

.child:nth-child(even) {
  background-color: crimson;
}
<div class='parent'>
  <div class='child'>Section 1</div>
  <div class='child'>Section 2</div>
  <div class='child'>Section 3</div>
</div>
Carle B. Navy
  • 1,156
  • 10
  • 28
  • Thank you very much! I've accepted @BoltClock's answer for it helped me better to understand how scroll-snap works, but yours was also very helpful in reminding that you can make the parent scrollable (and thus snap-scrollable) by setting a max-height on it. So thanks a lot! – selmanbey Nov 13 '18 at 09:50
1

The element you designate as the scroll snap container needs to be the one that the scrollbar is attached to. In your case, the parent element doesn't have a scrollbar — the scrollbar belongs to the viewport and the parent is extending past the size of the viewport without generating its own scrollbar. The scroll-snap-type property should therefore be applied to body (or html), not the parent:

body {
  margin: 0;
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: center;
  width: 100vw;
  height: 100vh;
  background-color: pink;
}

.two {
  background-color: crimson;
}
<div class='parent'>
  <div class='child'>Section 1</div>
  <div class='child two'>Section 2</div>
  <div class='child'>Section 3</div>
</div>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • This snippet doesn't produce any scroll snapping behavior for me in the latest Chrome or Firefox (though it does in Safari) – Luke Taylor Jun 13 '22 at 02:01
  • @Luke Taylor: I haven't been in the loop with the spec for a few years. Something might've changed. Safari has the tendency to either be the first, or last, to be up to date on various features. By several years. – BoltClock Jun 15 '22 at 16:03
  • shouldn't it be linked to the html instead of to the body the "scroll-snap-type"? – calebmiranda Jul 24 '23 at 04:27