I used this article as point of reference, in specific this working snippet, but in my page (script below) the vertical snap scrolling isn't working. Do you have any idea why?
.parent {
height: 100vh;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
}
section {
height: 100vh;
scroll-snap-align: start;
position: relative;
}
.one {
background-color: red;
}
.two {
background-color: blue;
}
.three {
background-color: grey;
}
.four {
background-color: green;
}
<div class="parent row">
<section class="one">
</section>
<section class="two">
</section>
<section class="three">
</section>
<section class="four">
</section>
</div>
The major problem you have in your code snippet, is that the displayed scrollbar belongs to the body, where no scroll-snap properties have been defined. This is why you do not have any snapping behaviour when scrolling.
To achieve your expected result, you need to
overflow
behaviour to the parent container to scroll
Below a working sample
As a note, consider that snapping properties (for chrome) have evolved, and that you are using deprecated features. See the css scroll snap on google developers.
Note also that this answer deals only with chrome, without the polyfill part. It is just the main scroll concept that is involved here
html,
body {
height: 100vh;
overflow: hidden;
}
.parent {
overflow: scroll;
height: 100vh;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
}
section {
height: 100vh;
scroll-snap-align: start;
position: relative;
}
.one {
background-color: red;
}
.two {
background-color: blue;
}
.three {
background-color: grey;
}
.four {
background-color: green;
}
<div class="parent row">
<section class="one"></section>
<section class="two"></section>
<section class="three"></section>
<section class="four"></section>
</div>
The original answer says to put overflow: hidden
directly on the html
and body
elements which messes up a lot of things, namely headers that use position: sticky
which is a pretty common concept.
The alternative is to just put the scroll-snap-type
property on the body and then put the scroll-snap-align
property on the elements that need to have scroll snap behavior.
body, html {
scroll-snap-type: proximity;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y proximity;
}
section {
height: 100vh;
}
.row section {
scroll-snap-align: start;
}
.one {
background-color: red;
}
.two {
background-color: blue;
}
.three {
background-color: grey;
}
.four {
background-color: green;
}
<div class="row">
<section class="one">
</section>
<section class="two">
</section>
<section class="three">
</section>
<section class="four">
</section>
</div>
<section>
<h2>This will not have sticky</h2>
</section>
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