Hammer 2.0 :挤压滚动元素

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设置为Touch操作时，在pinchstart之后不会发送夹事件，只有当夹结束时才会收到事件。我怀疑中间事件会作为滚动的一部分被忽略(尽管按下了2次触摸)。
• 当我不设置pan-x时，滚动不起作用(如预期的那样)，而夹点也起作用

有可能同时拥有这两种东西吗？

Answer 1

好像你在那里有个错误。这个选项叫做touchAction，单数。您给出的“pan”值在您的情况下是正确的，将允许您水平滚动。

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