Hammer 2.0 : Pinching a scrolling element

Question

I have a horizontal scrolling element like this:

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

https://jsfiddle.net/3um9n6zk/

On a touch device, the user can then swipe-scroll and select an element.

I'd also like to be able to pinch the container to adjust the elements' scale. Using 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);
}

My problem is, once I use Hammer to control the pinch, the (native html) scrolling no longer works.

• When I set pan-x as the Touch Action, no pinch events are sent after pinchstart, only when the pinch ends I get an event. I suspect the intermediate events are ignored as part of a scroll (even though 2 touches are pressed)

• When I don't set pan-x, the scrolling doesn't work(as expected) and the pinch does work

Is it possible to have both things at once?

Answer 1

It seems you have a typo there. The option is called touchAction, singular. The value of "pan-x" that you gave it is correct in your case and will allow you to scroll horizontally.

I've updated your fiddle to try it out: https://jsfiddle.net/3um9n6zk/1/