ScrollTrigger scroller with pin issue

[Vasyl Shvets]

If you will scroll fast up and down you will see twitching (bouncing). Why is this heppening?

See the Pen GRBKKJb by vasyl-shvets (@vasyl-shvets) on CodePen

[mvaneijgen]

I don't know why it is happening, but it has to do with you hacking the browser scrollbar. If you just let the browser handle the scroll there are no white bars appearing on the top or bottom of the black background. (I assume that is what you mean by twitching? 

 

See the Pen rNrBNOP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[GreenSock]

Yeah, that looks to me like a side effect of using a custom scroller and the browser handles scrolling on a separate thread that isn't synchronized with the main (JS) thread, thus the browser paints the scrolled page (the way it things it should be) and THEN it executes JavaScript a few milliseconds later at which point ScrollTrigger adjusts the pin position to be where it's supposed to be based on the scroll position. Whenever you use a custom scroller (not the body/html/root), ScrollTrigger uses a pinType: "transform" to solve various other problems (like if you use position: fixed on something inside an element that has a transform or anything else that creates a new stacking context, it'll treat that container as the reference point rather than the viewport). But in your case, you could just set pinType: "fixed" and use normalizeScroll() to force the scrolling to happen on the main thread: 

 

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

 

But like @mvaneijgen said, it's probably easier/cleaner to just not use a custom scroller like that (if you can). 

[Vasyl Shvets]

i use scroller as i need body position fixed on ios

 

[Vasyl Shvets]

@GreenSock

Thanks !)