Jump to content
Search Community

Applying scrolltrigger to a nested div only.

DexteRs Code test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

That's what the scroller property is for.


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.


  • Like 3
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...