I’m trying to find a snap scrolling solution that works with only partial sections of a page. Read only link below.
The page should scroll normally until you get to the product section, which is where the snap would take place, between each of the different product sections. Once you reach the final section, you should be able to scroll down as normal.
Running into an issue whenever a user manages to get them selves partially over the snap scroll window. I almost need to find a solution where the snap scroll window itself snaps into view, but unsure how to tackle it.
I have tried to do this exact thing exact thing on a recent project and ran into so many issues. The problem is, from what I gathered, that third party plugins use the body’s relative position to calculate the position of the section to make the snap scroll work. The ones I tried don’t know to only look at a specific wrapper for its position. I would love to know if someone else has gotten this to work but from my experience it didn’t work without any significant issues.
hi @Sam_Schwinghamer1@Noah-R it is possible with some “magic cocktail” of CSS scroll-snapsticky, JS intersection Observer etc…
But there some caveats that are hard to solve (at least for me). The main problem is speed of browser scroll related to mouse wheel but I believe it can be solved.
What I mean with that. We can use window.scrollBy to snap container to top based on getBoundingClientRect(). If we scroll very slowly it works just fine but when we scroll fast (usual speed of window scroll) section doesn’t stop exactly on top or bottom and dynamically continue until stops, this mean that section scroll is not end with covering 100vh . So that is why my suggestion was to reduce window speed when section enter viewport.
Another big problem I didn’t find solution (yet) is that window.scrollBy is not supported in Safari but is not necessary to use it and it may be solved just by using sticky on parent element.
Hello
I’m having the same issue, the clonable projects with snap scrolling I find don’t work only on some sections on the page…
A year later, has anyone else had a take on this ?
My knowledge in javascript is limited, but does anyone know how to make these clonable project (for example) work with normal sections above and below ?
I feel your frustration! I’ve experienced cloning a Webflow website just to find out that it looks pretty and neat exactly the way it is. But the moment you introduce it to an existing webflow website which already has numerous divs, different parent and child elements, etc… it all breaks and nothing works.
I will aim at figuring this one out for you folks. I’m a developer but I don’t have 20+ years in just development. I will try my best because I need this as well, the reason why I stumbled here to begin with lol…
It would be REALLY helpful if individuals who posted templates for the public could also post a list of restrictions. For instance, ‘No flexbox as a parent or blah blah breaks’… etc
Because we load them up and have no idea why it’s not working. Even if we know what certain stuff does and means, it could take 5m or it could take 4hrs trying to solve something that I can do in a few min on a standalone html file.
