CSS Scroll Snap allows the browser to snap scroll to elements in a container. To apply the same logic to the vertical page scroll I found that it had to be applied to <body> rather than <html> (see below). This is not a major problem however it does effectively create a scrolling area out of <body> instead of using the window scroll.
Whilst this may seem fine it has a couple of side effects:
- Window scroll functions can no longer be used in javascript
- The rubber band effect on Apple browsers is less responsive and non existent in Chrome on Mac.
I wanted it to appear as native as possible therefore the only conclusion would be to apply it to <html> rather than <body>. Applying it this way however prevents it from functioning. If you apply it to both, it will render correctly in Safari but remains broken in Chrome and Firefox.
The issue is not because <body> creates a separation between the parent and child element as if another <div> is added in the hierarchy it will still function correctly.
Here is the functioning code but applied to <body> rather than <html>.
<html>
<body>
<div class="extra_parent">
<div class="child">ONE</div>
<div class="child">TWO</div>
<div class="child">THREE etc..</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
html {
height: 100vh;
overflow: hidden
}
.child {
position: relative;
height: 80vh;
font-size: 100px;
text-align: center;
line-height: 80vh;
color: #000;
scroll-snap-align: end;
}
Solve a Fiddle: https://jsfiddle.net/u8tsjven/