Jump to content
Search Community

When is it safe to call ScrollSmoother.scrollTo() after dynamically adding an element to the DOM?

alexbrt test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi all!

 

I am currently working on a SPA in which I use a ScrollSmoother instance to synchronize the window's scroll with some WebGL elements, and I also use ScrollTrigger to pin sticky elements.

 

A section of this website has a filtering system which dynamically adds / removes items from the DOM. After the DOM updates, I call ScrollTrigger.refresh() to recalculate the positions and then ScrollSmoother.scrollTo() to scroll back to the top of the section which is always present in the DOM. The pinned items' positions are correctly recalculated; however, the ScrollSmoother.scrollTo() call does nothing unless I delay it (via a setTimeout()).

 

I was wondering if you guys know off the top of your heads when it is actually safe to call ScrollSmoother.scrollTo() after updating the DOM.

 

I will try later today to reproduce the issue on a CodePen, though I couldn't help but pop the question now because it's currently really late in my time zone.

 

Many thanks!

Link to comment
Share on other sites

  • 4 weeks later...
  • 2 weeks later...

Hello 🙂,

 

Thank you for this update @GreenSock ! I have a quite similar code as the one you shared on the code pen. My problem is that I'd like to keep the scroll position when the user add elements to the dom. If you supress smoother.scrollTo("#start", true); from your code you'll see that when adding elements the window jumps to top but the scrollbar stills on the right position creating an offset between what is diplayed (top of the page) and the actual scroll position 🧐 When scrolling down again the window jump back to the correct position.

 

Please see a video here : https://mega.nz/file/W8w0jR5Z#uZ-6XnU2sTz03G5DbJLQQtP4Tv7jRnkaViA9r6WSynU

 

EDIT : just wanted to point out that ScrollSmoother.scrollTo() still not working for mobile browsers and offset method stills have the 'overscroll bug'. Please see the below issue I opened last month 

 

Link to comment
Share on other sites

Hi @BenjaminO. It's pretty difficult to troubleshoot by just looking at a video - can you please provide a minimal demo (like in CodePen) and also make absolutely sure that you're using at least version 3.11.2? I suspect you're using an outdated file. 

 

What's very odd is that I never got any notifications about your old post there, sorry. Perhaps it went to my spam folder, but I wasn't ignoring you. I just posted a response there. 👍

Link to comment
Share on other sites

Hello @GreenSock ! 

 

No worries thank you for the response ! I forked your codepen but I still have the weird jump to top when adding elements (I cleared the cache !). Please see :

See the Pen MWGrxze by benjamOD2 (@benjamOD2) on CodePen


I am 99,99% sure I am using GSAP 3.11.2 but just in case, how do you clear your cache ? For Safari I am doing [cmd] + [alt] + [e]For firefox I am doing the following : Preferences > Privacy & Security panel > In the Cookies and Site Data section => Clear Data….

I also tried with CleanMyMac but still the same results

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...