hammer.js 滚动不适用于捏合和捏合事件答案

【问题标题】：hammer.js scroll not working with pinchin and pinchout eventshammer.js 滚动不适用于捏合和捏合事件
【发布时间】：2013-03-12 21:45:27
【问题描述】：

我正在使用hammer.js 来捕捉pinchin 和pinchout 事件并更改页面的字体大小。所以，我写了以下代码：

        var touch_area = document.getElementById('touch-area');
        var hammertime = Hammer(touch_area).on("pinchin pinchout", function (ev) {
            //alert(ev.type);
            if(ev.type=="pinchin")
                decreaseFontSize();
            else
                increaseFontSize();

        });

它可以工作，但它会禁用垂直滚动。我该如何解决？有什么建议吗？

【问题讨论】：

标签： pinch hammer.js

【解决方案1】：

Ashish Maradiya 的作品对我来说很好，但只适用于 android。

经过大量研究，我仅使用以下代码就可以在 android 和 iphone 中做到这一点：

    var mc = new Hammer.Manager(myElement, {
        touchAction: 'manipulation'
    });
    mc.add([new Hammer.Pinch()]);

    mc.on("pinchin", function (ev) {
        //code
    });
    mc.on("pinchout", function (ev) {
        //code
    });

【讨论】：

【解决方案2】：

将 css 属性应用到您的 (#touch-area) div

#touch-area{
touch-action: pan-x pan-y !important;
}

hammer.js pinch, pincin, pinchout 事件总是添加 touch-action:none 属性而不是我们的滚动属性不起作用

【讨论】：

【解决方案3】：

尝试添加这个 css：

body {overflow-y:scroll;}

如果以后，您希望同时启用垂直和水平滚动条，请使用此

body{ overflow: scroll; }

【讨论】：