Ivan Mocs Posted July 2, 2023 Share Posted July 2, 2023 how to move the smoothscroll to another div, I want when clicking the "SHOW MORE DETAIL" button then the smoothscroll is activated on the open div [id="detail-section"], but for the div behind it is stopped. And when the "CLOSE DETAIL" button is clicked then the smoothscroll is active again [id="smooth-content"]. See the Pen rNQwOXQ by adeivan (@adeivan) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted July 3, 2023 Share Posted July 3, 2023 I've add some JS to you click handlers which gives a class to the body element .disable-scroll, which sets overflow-y: hidden; via CSS and this will prevent scroll. It is not really a GSAP issue, I just googled "how to stop scrolling behind an element" and this was the frist post that popped up https://alvarotrigo.com/blog/prevent-scroll-on-scrollable-element-js/ Hope it helps and happy tweening! See the Pen XWygjRw?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
Ivan Mocs Posted July 3, 2023 Author Share Posted July 3, 2023 8 menit yang lalu, mvaneijgen berkata: Saya telah menambahkan beberapa JS ke penangan klik Anda yang memberikan kelas ke elemen tubuh .disable-scroll, yang mengatur overflow-y: hidden; melalui CSS dan ini akan mencegah gulir. Ini sebenarnya bukan masalah GSAP, saya hanya mencari di Google "bagaimana cara berhenti menggulir di belakang elemen" dan ini adalah posting pertama yang muncul https://alvarotrigo.com/blog/prevent-scroll-on-scrollable-element-js/ Semoga membantu dan selamat tweening! Yeah you right, adding overflow:hidden will stop the scroll function, but how can I make smoothScroll inside the current div, there I write "THIS IS SCROLLING CONTENT" but I can't scroll it. I can't use the id "#smooth-content" at the same time If I add "#smooth-content" to the popup div that is currently appearing then scroll only works on that div, not on the div below it. 8 menit yang lalu, mvaneijgen berkata: const smoother = ScrollSmoother.create({ smooth: 1.4, content: "#smooth-content", //How to toggle to ".new-section-container" wrapper: "#smooth-wrapper", }); Link to comment Share on other sites More sharing options...
mvaneijgen Posted July 3, 2023 Share Posted July 3, 2023 That content didn't have enough content on my screen to scroll, but I gave it a height and forced it to overflow-y: scroll !important; which seems to work. If you want to also give it smooth scroll you'll have to create a new ScrollSmoother object with that elements properties, I would figure that you could have multiple ScrollSmoother on one page, but I've never used it. See the Pen XWygjRw?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted July 3, 2023 Share Posted July 3, 2023 1 hour ago, mvaneijgen said: I would figure that you could have multiple ScrollSmoother on one page, but I've never used it. I don't think that is the case - As far as I know, ScrollSmoother is designed to only smoothen out the 'main' scrolling as a single instance on a page; You can not have multiple instances and it is not supposed to smooth the scrolling of individual elements on a page. Here's what the docs say: Quote Can ScrollSmoother be applied to the contents of individual elements instead of the whole web page? No, ScrollSmoother is intended to be used to smooth the scrolling on the overall page, not individual elements. 3 1 Link to comment Share on other sites More sharing options...
mvaneijgen Posted July 3, 2023 Share Posted July 3, 2023 Welp my bad, I've never used SmoothScroll my self. I get sea sick scrolling over those types of pages, so I've never used it. 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