When I scroll with scroll snap enabled on my webpage in Chrome; it over scrolls, that is, it doesn't stop scrolling. My mouse wheel is fine, my chrome is up to date. It works as expected in Firefox but on webkit browsers like Chrome and opera, it doesn't.
html {
scroll-snap-type: y mandatory;
scroll-snap-stop: always;
}
::-webkit-scrollbar {
width: 0.5em;
}
::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.7);
}
::-webkit-scrollbar-thumb {
background-color: rgba(190, 190, 190, 0.5);
}
body {
font-family: "Montserrat", sans-serif;
margin: 0;
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
overscroll-behavior: none;
}
section {
height: calc(100vh - 14em);
width: calc(100% - 14em);
padding: 7em;
color: white;
scroll-snap-align: start;
}
section:nth-of-type(1) {
background-color: rgb(96, 175, 21);
}
section:nth-of-type(2) {
background-color: rgb(21, 139, 175);
}
section:nth-of-type(3) {
background-color: rgb(175, 21, 129);
}
section h3 {
font-size: 3em;
}
section p {
font-size: 1.2em;
}<body>
<section>
<h3>A subtitle lives here</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi suscipit, nulla, totam eveniet molestiae odit cupiditate accusamus illum voluptatem quibusdam voluptates vitae! Maiores numquam incidunt recusandae exercitationem at magni atque.
</p>
</section>
<section>
<h3>A subtitle lives here</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi suscipit, nulla, totam eveniet molestiae odit cupiditate accusamus illum voluptatem quibusdam voluptates vitae! Maiores numquam incidunt recusandae exercitationem at magni atque.
</p>
</section>
<section>
<h3>A subtitle lives here</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi suscipit, nulla, totam eveniet molestiae odit cupiditate accusamus illum voluptatem quibusdam voluptates vitae! Maiores numquam incidunt recusandae exercitationem at magni atque.
</p>
</section>
</body>