Jump to content
Search Community

ScrollTrigger with css scroll property

dhdbtkd test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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! 

  • Like 1
Link to comment
Share on other sites

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

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