Jump to content
GreenSock

alexbrt

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

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

Update, here is the CodePen. I would expect that clicking the button adds a new element and scrolls the page back to the first section.

 

See the Pen ExErBez by alexbrt (@alexbrt) on CodePen

Link to comment
Share on other sites

  • 4 weeks later...

@Cassie, thanks for the alternative route. While it works, it makes it harder to handle both animating and manually scrolling at the same time.

@GreenSock Jack, this is certainly better, though I'm still noticing the old behavior when clicking the add button while scrolling.

Link to comment
Share on other sites

  • Solution
12 hours ago, alexbrt said:

@GreenSock Jack, this is certainly better, though I'm still noticing the old behavior when clicking the add button while scrolling.

Should be resolved in the latest beta (please clear cache): 

See the Pen wvjgKKm?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

  • 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

Hello @GreenSock ! Indeed it is working as expected now !! I look forward to dl this new version ! 🙂 I also replied to you on the following topic. Thank you again for the great work.

 

 

  • Thanks 1
Link to comment
Share on other sites

@BenjaminO - GSAP 3.11.3 is officially released. The CDN is in the process of updating, but should have the files within 15-30 minutes (typically). Enjoy!

 

🥳 

  • Thanks 1
Link to comment
Share on other sites

Hello @GreenSock ! It is working perfectly with this new version 😍 thank you 

  • Like 2
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.
×