1

This answer does not work in Firefox 86. It seems that :

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

needs the following CSS rules to snap children to viewport :

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

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

and applying the scroll-snap-type on body has no effect. In other words, it seems that the scroll-snapping container only works on perfectly-nested children.

Is there a work-around to get non-perfectly-nested children to be supported by scroll-snapping ?

Edit :

To give more context, CMS usually put the scrolling bar on <html> while the actual content body is nested many times, for example in <body><div class="content"><article><div class="post-content"><...>, so the scrolling container is usually far away in DOM from the content to align on.

Aurélien Pierre
  • 604
  • 1
  • 6
  • 20
  • Why would you want to change the default browser behavior? – m4n0 Mar 30 '21 at 00:34
  • To get the view aligned on full-height carousels https://photo.aurelienpierre.com/photographers-galleries-demo/#Carousel-with-no-captions Default browser behaviour is simply wrong. – Aurélien Pierre Mar 30 '21 at 00:39

0 Answers0