possible to switching smootscroller to another div?

[Ivan Mocs]

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

[mvaneijgen]

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

[Ivan Mocs]

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",
});

 

[mvaneijgen]

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

[akapowl]

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.

 

[mvaneijgen]

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.