GSAP and Locomotive Scroll: Casued extra scroll! [FIXED!]

[momo12]

Guys I have a quetion

 

I used Locomotive scroll and GSAP scroll Proxy but it casues extra scroll. This only happens with Mouse wheel and not the scroll-bar!

 

 

gsap.registerPlugin(ScrollTrigger);
const locoScroll = new LocomotiveScroll({
  el: document.querySelector(".content-wr"),
  smooth: true
});

ScrollTrigger.scrollerProxy(".content-wr", {
  scrollTop(value) {
    return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
  }, 
  getBoundingClientRect() {
    return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
  },
  pinType: document.querySelector(".content-wr").style.transform ? "transform" : "fixed"
});

 

[momo12]

For guys who have the same problem: use this inside CSS

html.has-scroll-smooth {
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;  
}

[Rodrigo]

Hi @momo12,

 

Great to hear that you were able to solve this and thanks for sharing your solution. Hopefully this will be a good resource for other users 🥳

 

Happy Tweening!