Streaming live at 10am (PST)

Snap Scrolling only on certain section

Hey guys!

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.

Any input greatly appreciated! Thanks so much!

Here is my site Read-Only:
(how to share your site Read-Only link)

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-snap sticky, 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. :thinking:

1 Like