Menu
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?
317
Disabling scroll with only CSS. There's another way to disable scrolling that is commonly used when opening modals or scrollable floating elements. And it is simply by adding the CSS property overflow: hidden; on the element you want to prevent the scroll.
To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element. This hides all content beyond the element's border.
The scroll container snaps to snap positions in both of its axes independently (potentially snapping to different elements in each axis). The visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled. That means it snaps on that point when the scroll action finished, if possible.
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.
81
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
