title: Hammer detects transform or scroll events, but not both
body: <p>I'm trying to implement a Google Maps-style interface for viewing large images--basically, pinch to zoom, pan by dragging/swiping. Hammer.js seemed like an obvious candidate, but so far I've been completely unable to get it to work properly. Here's the JSFiddle: <a href="http://jsfiddle.net/wfokcsm/qLu3T/2/" rel="nofollow">http://jsfiddle.net/wfokcsm/qLu3T/2/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="canvas"&gt;
          &lt;div id="arrows"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var hammertime = new Hammer(document.body);
  hammertime.on('pinch', function(e) {
      $('#arrows').css('transform', 'scale(' + e.gesture.scale + ')');
  });
  </code></pre>
  
  <p>As it's coded, with Hammer instantiated without preventDefault set to true, I can scroll the #arrows element, but can't pinch to zoom. If I set preventDefault to true, I can pinch to zoom, but cannot scroll.</p>
  
  <p>I think the issue is that the default native scroll event takes precedence over everything Hammer does, including the detection of whether the intended gesture is even supposed to be a pinch/transform or not. So even though Hammer, in theory, is supposed to intelligently block the browser's default event for you if it detects the right event, it never gets the chance to. Either the scroll event fires, or Hammer forces ALL native events off, allowing its own events to take over at the cost of the native scroll events.</p>
  
  <p>The workarounds I've seen described seem to involve initializing Hammer on a different element besides the body. That would be fine, except that the element that needs the pinch-to-zoom detection ALSO needs to be scrollable, so it seems like that won't work (unless I'm misunderstanding that workaround). I'm not sure there is a good solution here. I tried blocking all native events and faking the scrolling myself using the Hammer drag event, but that doesn't seem to work either for some reason.</p>
  
  <p>Is there anything I can do to get both scrolling and pinch-to-zoom to work? Use a different library, configure Hammer differently, start from scratch and detect the pinch event completely manually, etc.?</p>