Applying scrolltrigger to a nested div only.

[DexteRs Code]

I'm working on a project where I need the scrolltrigger logic for the inner div and not on outer/ main div (orange section).

 

The inner div contains 3 sections, where the 2nd section should change it's background color to white when its top hits center of the screen, but currently it's creating an extra div at the bottom of outer div (orange section) and when the outer div is scrolled then the 2nd section changes the background color to white.

 

Is there any way to apply scrolltrigger to the inner div only ?

 

PS :To see the problem, plz go to full screen on codepen.

Thanks in advance!

See the Pen JjrOQXp by dexterscode (@dexterscode) on CodePen

[OSUblake]

That's what the scroller property is for.

 

Quote

scroller

String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself.

 

[DexteRs Code]

Oh nice, didn't knew about that, thankyou for the help!!