触摸板上的双指滚动js

Two-fingered scroll js on touchpad

本文关键字：滚动 js 触摸      更新时间：2023-09-26

我们开发了一个具有水平方向的网站，希望通过两个手指向左/向右移动来实现触摸板控制。

当你在触摸板上向左/向右移动两根手指时，网站页面会向左/向右滚动。现在，我们已经实现了两个手指上下移动和页面左右滚动的触摸板控制。

我们如何使用js或jQuery更改触摸板控制，用两根手指从上/下向左/向右移动以向左/向右滚动网站页面？

我可能迟到了一点，但在偶然发现这个问题之前，我也有同样的问题。进一步的调查让我认为，捕捉触控板滚动的最佳选择是wheel事件。

function doScroll(e) {
    // positive deltas are top and left
    // down and right are negative
    // horizontal offset    e.deltaX
    // vertical offset      e.deltaY
    console.log(`x:${e.deltaX} y:${e.deltaY}`);
    e.preventDefault(); // disable the actual scrolling
}
window.addEventListener("wheel", doScroll, false);

我准备了一个小提琴，它告诉你滚动方向和偏移值，但阻止滚动本身。

轮子事件具有delta属性，该属性（至少在Chrome中）对动量敏感，并为您提供当前的相对滚动偏移，而不是scroll事件中可用的绝对滚动位置。

通常当你想接管脚本中的触摸事件时，你会添加这样的东西来防止通常的滚动和缩放：

$("body").bind("touchstart", function(e) {
    e.preventDefault();
})

您需要做的是更改可以滚动的内容。如果你的页面足够大，向左/向右滚动是有意义的，浏览器会允许它以这种方式滚动。

基本上，如果你只想让它们在某个方向上滚动，就只想在那个方向上制作内容。如有必要，您可以通过将溢出设置为none的特定大小的容器div来实现这一点。

相关文章：