ScrollTrigger with css scroll property

[dhdbtkd 1 Likes (Newbie)]

Hi

 

I have header and footer that are always in fix position

 

Beside header and footer there is main content. main content is using gsap ScrollTrigger

 

when i scrolling i wanna scroll only main content and it work well.

 

but gsap and scrolltrigger is not working properly.

 

You can see my sample code at codepen

 

 

See the Pen mdKRMGO by dhdbtkd (@dhdbtkd) on CodePen

[mvaneijgen 1,580 Likes (Superhero)]

Hi @dhdbtkd welcome to the forum! 

 

By default ScrollTrigger selects the the body (or HTML) as the scroll element, eg the element that normally scrolls. If you want to overwrite that, you'll have to define what element is the scroller in your case scroller: ".myScroller", for it to work. (I gave your element a class of myScroller)

 

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.

 

Read more on the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

See the Pen JjZEyVo by mvaneijgen (@mvaneijgen) on CodePen

 

Personally I wouldn't overwrite the normal browser behavior if you don't have a clear use case for it. In your case you can just set the header and footer to position: fixed; and have the browser behave like it normally does, but that is just my opinion. 

 

Hope it helps and happy tweening! 

[dhdbtkd 1 Likes (Newbie)]

21 minutes ago, mvaneijgen said:

Hi @dhdbtkd welcome to the forum! 

 

By default ScrollTrigger selects the the body (or HTML) as the scroll element, eg the element that normally scrolls. If you want to overwrite that, you'll have to define what element is the scroller in your case scroller: ".myScroller", for it to work. (I gave your element a class of myScroller)

 

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.

 

Read more on the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

 

 

 

Personally I wouldn't overwrite the normal browser behavior if you don't have a clear use case for it. In your case you can just set the header and footer to position: fixed; and have the browser behave like it normally does, but that is just my opinion. 

 

Hope it helps and happy tweening! 

 

Hi mvaneijgen.

 

I didn't know there are scroller attribute for this case.

 

You save my time.

 

Thank you for your quickly response