拖动滚动触摸设备，如手机/ iPad

DragScroll For Touch Devices like Mobile / iPad

本文关键字：手机 iPad 滚动 触摸 拖动      更新时间：2023-09-26

我开发了一个电子编程指南，我对桌面感到满意，但我无法在触摸设备上进行拖动和滚动。

我正在使用以下插件来实现桌面上的拖动和滚动功能：

http://hitconsultants.com/dragscroll_scrollsync/dragscrollable.js

我将jquery移动库添加到项目中，希望我可以通过将虚拟鼠标事件添加到可拖动滚动插件（例如vmousemove，vmouseup，vmousedown）来利用它，但是它没有达到预期的效果，我仍然坚持没有拖动滚动。

这是我的设置示例：

http://jsbin.com/ImejohuH/14/edit?js,output

实际上，

在添加 Modernizer 的最小版本以检查触摸设备时，我纯粹是偶然地解决了这个问题，以便我可以设置 overflow-x：在容器上滚动以允许在触摸设备上滚动。

这就是所需的全部内容：

添加对现代化.js的脚本引用。我的特定构建可以从这里获取，并且只是一个包含触摸事件和 CSS 类的最小构建。

然后，您需要对触摸设备执行检查，如果为 true，我们将 overflow-x css 属性设置为 auto，如下所示：

$(function() {
    if (Modernizr.touch) {
        $("#mycontainer").css("overflow-x", "auto");
    }
});

我在测试中发现的结果实际上非常令人满意，因为您不会像在台式机上那样获得可怕的笨重滚动条，因此解决方案运行良好。

相关文章：