Jump to content
Search Community

How to use smooth scroll using scrollTrigger only in specific area?

bs.choi test
Moderator Tag

Recommended Posts

hi!

I am making smooth scroll using scrollTrigger.

But unlike many examples I need smooth scroll only in a specific area.

In the link below, I want the contact and marquee areas to not scroll, and only the archive to be a smooth scroll.

https://jsfiddle.net/js67bxvu/

Changing the scroller to default in the scrollTrigger option and changing the contact and marquee divs to position: fixed works similarly, but that's not what I want.

Because scrolling on the contact and marquee divs also scrolls the archive.

How can I use gsap scrollTrigger to smooth scroll only the contents in a specific box?

 

I'm not good at English, so I ask through a translator.
Thank you for your understanding.

Link to comment
Share on other sites

@OSUblake hi. 

I've seen many examples of smooth scroll using scrollTrigger.

However, if you use a pin to fix the contact and marquee divs, scrollTrigger works when you scroll in the contact and marquee areas.

The function I want is that the scrollTrigger does not respond when the mouse is placed on the contact and marquee divs and scrolls, and the scrollTrigger works only when scrolling in the archive div.

So, I set the scroller to the archive div rather than the default (viewport) in the scrollTrigger option, and the problem occurred.

 

https://jsfiddle.net/9srz07nt/

Like the link above, scrolling does not respond in contact and marquee divs, and I want to implement smooth scroll using scrollTrigger only in archive div so that it responds.

 

Thanks for the example you posted

Link to comment
Share on other sites

The body has to scroll in order for that work. If you don't want it scroll, like in my demo, you need to prevent it somehow. For example, you can prevent the mouse wheel from scrolling the container like this. You would probably have to do something similar to that for touch events.

 

See the Pen GROqMOR by GreenSock (@GreenSock) on CodePen

 

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