Hey there! I have a total of 7 sections in my layout. The first 4 sections are all CMYK, while the last 3 are RGB.
My current challenge is trying to prevent scroll snapping on the RGB sections.
The issue arises when I apply scroll-snap-align: start; to the CMYK sections. Whenever I reach the end of the .bg-key section (black), it keeps snapping back to the start as I scroll down...
Here's the CSS code snippet for reference:
html {
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
section {
height: 100vh;
position: relative;
color: white;
}
.bg-cyan {
background: cyan;
scroll-snap-align: start;
}
....(more styles)
If you'd like to check out the full example, here's the fiddle link: https://jsfiddle.net/joshmoto/qday0r9o/4/
I've also experimented with using scroll-snap-type: none; on the .bg-red section using the general sibling combinator (~). But unfortunately, nothing seems to change and all sections keep snapping. Here's the updated CSS snippet:
If you want to see this behavior in action, feel free to visit the fiddle at: https://jsfiddle.net/joshmoto/mbey5p6s/38/
If anyone has any insights on what I might be doing wrong or if there's a way to disable scroll snapping after a specific point, I would greatly appreciate your input!
Thank you!