bs.choi Posted February 3, 2022 Share Posted February 3, 2022 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 More sharing options...
OSUblake Posted February 3, 2022 Share Posted February 3, 2022 Hi bs.choi, Have you looked in our smooth scroll demo in the scrollerProxy docs? I just made a quick fork showing how you can use to keep something pinned, the purple box. See the Pen NWwrvMQ by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
bs.choi Posted February 3, 2022 Author Share Posted February 3, 2022 @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 More sharing options...
OSUblake Posted February 3, 2022 Share Posted February 3, 2022 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 2 Link to comment Share on other sites More sharing options...
bs.choi Posted February 3, 2022 Author Share Posted February 3, 2022 @OSUblake Wow! I guess I was thinking too short. Why didn't you think of that?? thank you!!!!!!!!!!!!!!!!!!!!!!!!! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now