Scroll snap css property with overflow y is causing page scroll

Question

I'm using the css property scroll-snap-type to have contents of an overflowing div snap to place on scroll.

It's easily applied:

.container {
  height: 400px;
  overflow-y: scroll;
  scroll-snap-type: mandatory;
}

.contents {
  scroll-snap-align: start;
}

Have a look at this page in Safari 11+ on desktop for an example - https://codepen.io/fionnbharra/full/PQZmav/ Scroll over the div on the left hand side of the page. Notice how the when scrolling finishes the div aligns to the top of the container. This is behaving as expected.

My problem is that it breaks when we have a long page - https://codepen.io/fionnbharra/full/oEbWeq/

Try scrolling over the same overflow div. Notice how the page body scrolls at the at the same time, meaning it's very difficult to see the original content scroll.

Is this a bug? Am I doing something wrong?

Answer 1

It is experimental technology only partial supported. Chrome doesn't support it now (2018-02-07). https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

You should use other styles for the moment. the scroll-snap family can be replaced with additional container relatively positioned.

https://caniuse.com/#feat=css-snappoints

Browsers generally don't implemented it or implemented partially. Use other CSS styles.

BTW. Use caniuse.com if you want to be sure the style is supported correctly.