how can i bind scroll trigger to scroller inside element

[Farouq]

so i make a pure parallax using transform and perspective

 

to archive the parallax effect when scrolling i should use scroll element inside the container where the property transform and perspective is, and hide the overflow from the body (scroller default), and my problem is how can i change scrolltrigger scroller (from default browser scroll ) to my own scroller from this container (with overflow auto)??

See the Pen QWEXJgr by stdarkpha (@stdarkpha) on CodePen

[akapowl]

Hey @Farouq - welcome to the forums.

 

You could either set it up via applying

 

scroller: '.world'

 

to each of your ScrollTriggers, or to all of them beforehand via .defaults like so

 

ScrollTrigger.defaults({
  scroller: '.world',
});

 

 

See the Pen c0c8968cf52440da783127846635e9a2 by akapowl (@akapowl) on CodePen

 

 

This is from the ScrollTrigger-Docs:

 

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.

 

 

Cheers,

Paul