pinch - hammer.js 滚动不适用于捏合和捏合事件

Question

我正在使用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();

        });

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

Answer 1

Ashish Maradiya 的作品对我来说很好，但只在安卓上。

经过大量研究后，我仅使用以下代码就可以在 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
    });

Answer 2

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

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

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

Answer 3

尝试添加这个 CSS：

body {overflow-y:scroll;}

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

body{ overflow: scroll; }