Handle trackpad inertial scroll javascript

810 Views Asked by Roberto Dev At 26 March 2021 at 15:23

I'm creating a full page website and I'm using fullPageScrollPureJs as plugin to scroll to sections. It's working fine with mouse wheel and keyboard but with a trackpad it scroll multiple pages at time. Is there a way to handle the scrolling with the trackpad and prevent the multiple page scroll? thank you!

<link rel="stylesheet" href="https://rawgit.com/almeida-matheus/fullPageScrollPureJS/master/app/assets/stylesheet/full-page-scroll.css">

<body>
  <div id="main" class="scroll-container">
    <section style="background-color:blue"></section>
    <section style="background-color:red"></section>
    <section style="background-color:green"></section>
    <section style="background-color:blue"></section>
  </div>
  
  <!-- Scripts section -->
  <script src="https://rawgit.com/almeida-matheus/fullPageScrollPureJS/master/app/assets/javascript/full-page-scroll.js"></script>
<script>
    //Init FullScroll Plugin
    new fullScroll({
        mainElement: "main",
        displayDots: true,
        dotsPosition: "right",
        animateTime: 0.7,
        animateFunction: "ease"
    });
</script>
</body>

Original Q&A

There are 1 best solutions below

Jorel Amthor On 26 March 2021 at 15:26

Compare e.wheelDeltaY and e.deltaY (or e.deltaMode in Firefox) to detect touchpad mouse device

    var isTouchPad = e.wheelDeltaY ? e.wheelDeltaY === -3 * e.deltaY : e.deltaMode === 0
    // your code
    document.body.textContent = isTouchPad ? "isTouchPad" : "isMouse"
}
document.addEventListener("mousewheel", handler, false);
document.addEventListener("DOMMouseScroll", handler, false);```

Handle trackpad inertial scroll javascript

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in SCROLL

Related Questions in TRACKPAD

Trending Questions

Popular # Hahtags

Popular Questions