Scrollbar not updating properly when pressing Tab using Scrolltrigger + Greensocks smoothScroll for ScrollTrigger

[jshchui 0 Likes (Newbie)]

Hello, first off thank you for this wonderful library, it's doing wonders for my current project.

I am creating a website that is using a scrolling experience with scrollTrigger. I also added Greensocks example (https://codepen.io/GreenSock/pen/gOgWELo)  'smoothScroll() for ScrollTrigger' as well.
It's working great until I start pressing tab to navigate through the buttons / links.

I made a codepen to demonstrate the problem.
It is tabbing to the correct button, however I noticed the scrollbar isn't moving at all while the screen is going to the buttons. After tabbing you can continue scrolling and it goes down way beyond the container.

I tried to force the scrollbar to 'scroll' by adding an "addEventListener('focusin', () =>)" where I get the tabbed target and calculate its Y distance from the body and force scrollTrigger to scroll to the calculated distance. mySmoother.scroll(yOffsetToBody)

After that, it sorta is 30% working. It works well when you are at the end and you do 'shift + tab' to go backwards, but just tabbing forwards, it's really wonky.

Is there a proper way to get scrollTrigger + smoothScroll work well with tabbing?

Any help would be appreciated. I do know that just using the Greensock club's scroll smoother completely solves this problem, but I'm trying to see if this can be resolved without that plugin first.

Thank you.

See the Pen wvjeZLR by jshchui (@jshchui) on CodePen

[GreenSock 18,885 Likes (Superhero)]

On 9/20/2022 at 9:40 PM, jshchui said:

I do know that just using the Greensock club's scroll smoother completely solves this problem, but I'm trying to see if this can be resolved without that plugin first.

Yep, ScrollSmoother is a much more refined, robust solution that solves problems like that. The helper function you referenced is more of a bare-bones, old solution that pre-dated ScrollSmoother. 

 

If you want that extra functionality without joining Club GreenSock (to get ScrollSmoother), you'll need to build it in yourself. It'd basically involve listening for focusin events and jumping to the appropriate spot on the page based on that element's position. 

 

Good luck! 👍

[jshchui 0 Likes (Newbie)]

Hey thanks for the reply, much appreciated. I do have another question for another idea.

I plan to originally start with scroll smoothing and once the user presses tab, I will kill the scroll smoothing, revert it back to the original scroll thus allowing them to tab normally.

However, I seem to have a problem to properly revert scroll proxy back to its original native scroll functionality.
I found a thread that similarly talks about it: 

Unfortunately, there wasn't a resolution and I also tried to use the 'ScrollTrigger.scrollerProxy(document.body)' that you suggested, but it still doesn't seem to work

I have created another codepen to reflect my problem.

See the Pen rNvzBRz by jshchui (@jshchui) on CodePen

 

The goal is to have scroll smoothing initially, but when I press tab, it will kill the scrollproxy, revert back to native scroll, and recreate the scrollTriggers.
Box2 and Box4 starts off pinned, but after tabbing, they don't pin anymore.
However, it doesn't work with the 'mySmoother' smoothing code. It initially have scroll smoothing, but when I press tab, it seems to revert back to native scroll, but the scrollTriggers that are recreated are not pinning properly.

If you comment out 'mySmoother' line, it works perfectly, so I think its something to do with me not clearing up the scroll proxy properly.

Any help is appreciated, thanks.

[GreenSock 18,885 Likes (Superhero)]

That's because the helper function sets the default scroller to that element ("#main" in your case) as well as the pinType. You need to correct those: 

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

[jshchui 0 Likes (Newbie)]

Thank you so much Jack, the pen you provided worked wonderfully. 

One last question, in my project I have nested components, each with their own scrollTriggers inside of them. Individually recreating all of them will be very difficult so I was hoping there is a way to recreate all the scrollTriggers inside 'scrollTrigger.getAll()'.

Is that possible?
I tried to store all the previous scrollTriggers except the scrollProxy one inside an array (previousTriggers)
And after I kill all my scrollTriggers and reset the scroll, I want to recreate all the triggers inside 'previousTriggers' by referencing ScrollTrigger.vars:

const allTriggers = ScrollTrigger.getAll();
const previousTriggers = []
if(allTriggers.length ) {
  allTriggers.forEach(scrollT => {
    const id = scrollT.vars.id;
    if (id !== 'smoothTrigger') {
      previousTriggers.push(scrollT);
    }
    scrollT.kill()
  })
}

// reset scroll......

previousTriggers.forEach(scrollT => {
    ScrollTrigger.create({
      ...scrollT.vars
    })
}

See the Pen eYrEjKr by jshchui (@jshchui) on CodePen

 

Unfortunately that doesn't seem to be working, is it possible to recreate a scrollTrigger from a saved scrollTrigger instance?

Edit: One thing I did notice again is that if you comment out mySmoother scrollProxy, it works perfectly again. Somehow the scrollProxy is interfering with it again?

Thanks again!

[jshchui 0 Likes (Newbie)]

I figured it out, the previous scroller value inside the ScrollTrigger.vars was messing it up. To solve it, I had to set the scroller to null

ScrollTrigger.create({
  ...scrollT.vars,
  scroller: null
})