微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

处理触控板惯性滚动javascript

如何解决处理触控板惯性滚动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);```

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。