How to make scroll-snap working in FF with body as scrolling container

Question

I am trying to have a page with vertical scrolling snapped to every paragraph (every photo description). I also want body to be my scrolling container, not some div inside body.

I have:

body.scroll-snap {
  scroll-snap-type: y proximity;
}

.scroll-snap .episode p {
  scroll-snap-align: start;
  scroll-margin: 8px;
}

This works perfectly in Chrome and Safari, but doesn't work in Firefox. Firefox inspector shows these CSS properties applied to tag, but the scroll doesn't snap.

How to make it work in FF without creating additional scrolling containers?

Answer 1

Apparently the better way is to set html element as your snapping container instead of body. In this case scroll snaps in FF and also in Chrome-like browsers. But it stops working in current Safari. You can fix it by setting scroll-snap-type to both.

Also please note that current Safari doesn't support scroll-margin, but instead supports deprecated scroll-snap-margin (hopefully this will be fixed in future versions).

So my current solution is:

html.scroll-snap {
  scroll-snap-type: y proximity;
}

html.scroll-snap body {
  scroll-snap-type: y proximity;
}

.scroll-snap .episode p {
  scroll-snap-align: start;
  scroll-margin: 8px;
  scroll-snap-margin: 8px; /* works in Safari */
}