javascript - 锤子2.0 : Pinching a scrolling element

Question

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

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

https://jsfiddle.net/3um9n6zk/

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

我还希望能够捏住容器来调整元素的比例。使用锤子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 设置为触摸操作时，在捏合开始后不会发送捏合事件，只有当捏合结束时我才会收到事件。我怀疑中间事件作为滚动的一部分被忽略(即使按下了 2 次触摸)

• 当我不设置 pan-x 时，滚动不起作用(如预期)，而捏合起作用

是否可以同时拥有这两种东西？

Answer 1

你好像有一个错字。该选项名为 touchAction，单数形式。您提供的“pan-x”值在您的情况下是正确的，并且允许您水平滚动。

我已经更新了你的 fiddle 来尝试一下:https://jsfiddle.net/3um9n6zk/1/