html {
scroll-snap-type: y mandatory;
}
article {
/* empty */
}
section {
scroll-snap-align: start;
}
html {
/* empty */
}
article {
scroll-snap-type: y mandatory;
}
section {
scroll-snap-align: start;
}
The problem is that option 1 cause the double-scroll bug in chrome, and I haven't found a way to fix it (changing the background color didn't work for me), and option 2 just won't do anything at all, same as if I didn't write this lines of code.
I have also tried playing with overflow-y, overscroll-behavior-y or changing the height of the container, but none of them fixed the issue.
I'd be very thankful for anyone who will try to help me :)
P.S I'm using create-react-app if it matters somehow.
The key is you need to make sure the element you have set to scroll snap is actually the one being scrolled.
In your case, although you placed the scroll-snap-type property on your article element, the article is free to stack its content and fill its parent. Thus, when you scroll, the html element is being scrolled, not the article element.
To fix this, simply add
article {
scroll-snap-type: y mandatory;
height: 100vh; /* match the height of the screen */
overflow-y: scroll; /* force it to scroll */
}
This will work as you expect. However, because your footer element is outside the article, when you reach the bottom, it will scroll the html element to show it. Then, if you scroll up on the article and not the footer, the footer will remain and your article will only be partially visible.
Therefore, I would suggest you actually add the above styling to your div#root element, and add scroll-snap-align: start; to your footer. This should make the scrolling work nicely.