Javascript Hammer检测变换或滚动事件，但不能同时检测两者

我正在尝试实现一个谷歌地图风格的界面，基本上可以查看大型图像，通过拖动/滑动进行缩放和平移。Hammer.js似乎是一个明显的候选，但到目前为止，我完全无法让它正常工作。以下是JSFIDLE：

HTML:

Javascript:

var hammertime = new Hammer(document.body);
hammertime.on('pinch', function(e) {
    $('#arrows').css('transform', 'scale(' + e.gesture.scale + ')');
});

在编码过程中，当Hammer实例化而未将preventDefault设置为true时，我可以滚动arrows元素，但不能通过挤压来缩放。如果我将preventDefault设置为true，我可以通过挤压来缩放，但不能滚动

我认为问题在于默认的原生滚动事件优先于Hammer所做的一切，包括检测预期手势是否应该是挤压/变换。因此，即使理论上，如果Hammer检测到正确的事件，它应该智能地为您阻止浏览器的默认事件，但它永远不会有机会。scroll事件激发，或Hammer强制关闭所有本机事件，允许其自己的事件接管，但代价是本机scroll事件

我所看到的解决方法似乎涉及到在身体之外的另一个元素上初始化锤子。那就好了，除了需要收缩到缩放检测的元素也需要是可滚动的，所以这似乎不起作用，除非我误解了这种解决方法。我不确定这里有没有好的解决办法。我尝试阻止所有本机事件，并使用Hammer drag事件假装滚动，但出于某种原因，这似乎也不起作用

我能做些什么来让滚动和捏动都发挥作用呢？使用不同的库，以不同的方式配置液压锤，从头开始，完全手动检测夹点事件，等等

#canvas {
    border: 1px solid black;
    height: 320px;
    overflow: scroll;
    width: 320px;
}
#arrows {
    background:
        linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
        linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
        linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
    background-color: #e1ebbd;
    background-size: 128px 128px;
    transform: scale(1);
    transform-origin: 0, 0, 0;
    height: 2000px;
    width: 4000px;
}

var hammertime = new Hammer(document.body);
hammertime.on('pinch', function(e) {
    $('#arrows').css('transform', 'scale(' + e.gesture.scale + ')');
});