在 iPad 中创建水平滚动（使用 Hammer JS 库防止垂直滚动）答案

【问题标题】：Creating a horizontal scroll in the iPad (preventing vertical scrolling with Hammer JS library)在 iPad 中创建水平滚动（使用 Hammer JS 库防止垂直滚动）
【发布时间】：2013-03-01 06:08:37
【问题描述】：

我正在尝试防止在应用内显示的页面中垂直滚动。我正在寻找使用 Hammer JS，但我不确定我应该如何使用它。我已经使用 event.preventDefault() 尝试了几个事件，但它似乎不起作用。

例如：

    $(document).hammer().on('swipeup', 'body',
        function(event)
        {
            event.preventDefault();
        }
    );

有什么想法吗？

【问题讨论】：

标签： javascript ipad safari swipe hammer.js

【解决方案1】：

我不知道是否需要使用 Hammer JS，但我已经成功地在 iOS 中使用 iScroll 4 https://github.com/cubiq/iscroll 实现了水平滚动（和禁用垂直滚动）（示例：http://cubiq.org/iscroll-4）

当你调用 iScroll 时，在选项中传递 hScroll:true 和 vScroll:false，如下所示：

new iScroll('XYZ', { hScroll: true, vScroll: false });

【讨论】：

【解决方案2】：

我无法让它仅与 Hammer 调用一起使用，但添加它应该可以：

$(document).addEventListener("touchmove", function (e) { 
    e.preventDefault(); 
}, false);

【讨论】：

嗯，这不是我想要的。它完全停止滚动工作。我想阻止垂直滚动，但水平滚动仍然可以工作（它是一个水平滚动页面）。
您可以手动检测滑动事件，然后自己滚动图像。例如：` Hammer(_canvas, "{drag: false}").on("swipe", function(event) { event.preventDefault(); if (event.gesture.direction == "left") MyScroll('left ',3); if (event.gesture.direction == "right") MyScroll('right',3); }); _canvas.addEventListener("touchmove", function (e) { e.preventDefault(); }, false); `