Question

我有一个像这样的水平滚动元素：

<ul class="playlist">
   <li>element1</li>
   <li>element2</li>
   .
   .
   <li>elementN</li>
</ul>

https://jsfiddle.net/3um9n6zk/

在触控设备上，用户可以滑动并选择一个元素。

我也希望能够捏住容器来调整元素的比例。使用Hammer 2.0：

function pinchMe($container) {

    var options={
        touchAction:"pan-x"
 //     touchAction:"none"
    };
    var hammer = new Hammer.Manager($container[0], options),
        cInitScale;

    hammer
        .add( [
                new Hammer.Pinch({ threshold: 0 }),
                new Hammer.Tap(),
                new Hammer.Press()
        ])
        .on("pinchstart", function(e) {
                cInitScale = VSIZE;
                window.console.log("pinch start is ",VSIZE);
        })
        .on("pinch pinchmove", function(ev) {
            // if pan-x is activated, I dont' get these events until a pinchend
            window.console.log("pinch");
            resizeHot (cInitScale * ev.scale);
        })
        .on("tap", tapHandler);
        .on("press", pressHandler);
}

我的问题是，一旦我使用Hammer来控制捏，（原生html）滚动就不再有用了。

当我将pan-x设置为触摸操作时，在pinchstart之后不会发送任何捏合事件，只有当捏合结束时才会发生事件。我怀疑中间事件被忽略作为滚动的一部分（即使按下了2个触摸）
当我没有设置pan-x时，滚动不起作用（如预期的那样）并且夹点确实有效

是否有可能同时拥有这两件事？

Answer 1

看来你有一个错字。该选项名为touchAction，单数。＆＃34; pan-x＆＃34;的价值你给它的是正确的，并允许你水平滚动。

我已经更新了你的小提琴试试：https://jsfiddle.net/3um9n6zk/1/

Hammer 2.0：捏合滚动元素

1 个答案: