I have some issues considering scroll-snap-align in css, probably due to a familiar bug in chrome.
I have found two ways to make the scroll-snap-align work, but both ways won't properly.
- Option 1 - use the scroll-snap-type in the html tag:
html {
scroll-snap-type: y mandatory;
}
article {
/* empty */
}
section {
scroll-snap-align: start;
}
- Option 2 - use the scroll-snap-type in the container (article) tag:
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.