Menu
I want my sections to take the whole page and as soon as the user scrolls up or down, the previous/next section comes up. It works perfectly on Firefox and on Chromium-Edge, but when I tested it on Chrome, it always skips a section (goes from section1 to section 3 and from section 3 back to section 1). What can I do to solve this problem?
Here is the HTML:
<div class="page container">
<div class="section section1">
...
</div>
<div class="section section1">
...
</div>
<div class="section section2">
...
</div>
<div class="section section3">
...
</div>
</div>
And here is the CSS:
.container{
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
/* Scroll Snap */
scroll-snap-type: y mandatory;
}
.section{
position: relative;
width: 100%;
height: 100%;
scroll-snap-align: start;
display: flex;
align-items: center;
justify-content: center;
}
here is the website if anyone wants to see by themselves : Open in Firefox and/or Chrome to see difference
637
Definitely a bug in Chrome. The offender seems to be background-color (!) property set on the container element.
For some inexplicable reasons its presence triggers overscrolling... BUT only on a wheel-kind scroll. The keyboard one (either with KeyUp/Down or PageUp/Down) works fine.
Here's SRE; try scrolling the page, then press 'Fix Chrome' button, then scroll one more time - and see the difference. In Chrome 86 (Version 86.0.4240.111 (Official Build) (64-bit), to be precise), at least.
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.break-things {
background-color: #f3f3f3;
}
.container {
position: relative;
width: 100%;
height: 100vh;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.item {
scroll-snap-align: start;
font-size: 7rem;
height: 77vh;
}
.item1 {
background-color: blue;
}
.item2 {
background-color: yellow;
}
.item3 {
background-color: red;
}<body>
<header><button type=button>FIX CHROME SCROLL SNAP</button></header>
<div class="container break-things">
<div class="item item1">Hello World</div>
<div class="item item2">Hello World</div>
<div class="item item3">Hello World</div>
</div>
<script>
let isChromeBroken = true;
document.querySelector('button').onclick = (ev) => {
isChromeBroken = !isChromeBroken;
ev.target.textContent = `${isChromeBroken ? 'FIX' : 'BREAK'} CHROME SCROLL SNAP`;
document.querySelector('.container').classList.toggle('break-things');
}
</script>
</body>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
