Gsap Selectric

[Sukru 6 Likes (Newbie)]

Hello, I am making a project with gsap smooth scroller, there is a selectric selectbox plugin in it, the problem is that when the selectbox is opened, the scroll in it does not move, the page moves. Can you help me?

See the Pen vYaxdKr by sukruemanet (@sukruemanet) on CodePen

[Rodrigo 5,421 Likes (Superhero)]

Hi,

 

The only thing I can think of is to get the selector option container elements and stop the event propagation:

$(function() {
  $('select').selectric(selectricOptions);
  const selectors = gsap.utils.toArray(".selectric-items");
  selectors.forEach((selector) => {
    selector.addEventListener("wheel", (e) => {
      e.stopPropagation();
    }, { passive: false });
  });
});

That seems to work in the way you intend. Let us know if you have more questions.

 

Happy Tweening!

[Sukru 6 Likes (Newbie)]

@Rodrigo Unfortunately, I tried but this method did not solve the problem, it continues.

[GreenSock 18,591 Likes (Superhero)]

Try setting allowNestedScroll: true in the normalizeScroll: 

 

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

 

Better? 

[Sukru 6 Likes (Newbie)]

@GreenSock yea thank you