处理触控板惯性滚动javascript

问题描述

我正在创建一个完整页面的网站，并使用 fullPageScrollPureJs 作为插件滚动到各个部分。使用鼠标滚轮和键盘可以正常工作，但使用触控板可以一次滚动多页。有没有办法用触控板处理滚动并防止多页滚动？谢谢！

<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>

解决方法

比较 e.wheelDeltaY 和 e.deltaY（或 Firefox 中的 e.deltaMode）以检测触摸板鼠标设备

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

javascript scroll trackpad