html - Pointer Events を使用したスクロール可能な div でのドラッグとパンのサポート

Question

スクロール可能な領域でドラッグ可能な div の場合を考えてみましょう。div の内側をタッチすると、さらに指を動かすと、div が領域内でドラッグされます。div の外側に触れると、さらに指を動かすと、スクロール可能な領域がパンされます。

これを示す JSFiddle があります。マウスを使用すると、div を簡単にドラッグできますが、タッチ イベントも同様に機能しないようです。

注: 私はフィドルでポインター イベントを使用しているため、それらをサポートしていないブラウザーを使用している場合、フィドルが壊れているように見えるかもしれません。

この相互作用を適切に実装する方法を知っている人はいますか?

http://jsfiddle.net/mrmills/13t34jsv/

HTML:

<div id="scroll-outer">
  <div id="scroll-inner">
    <div id="handle">
    </div>
  </div>
</div>

CSS:

#scroll-outer { width: 400px; height: 400px; overflow: auto }
#scroll-inner { width: 2000px; height: 2000px }
#handle { width: 44px; height: 44px; background-color: rgba(0,0,0,0.5) }

JS:

function pointerDown(ev) {
  scrollInner.addEventListener("pointermove", pointerMove);
  scrollInner.addEventListener("pointerup", pointerUp);

  dragStartX = ev.pageX; dragStartY = ev.pageY;
}

function pointerMove(ev) {
  handle.style.transform = "translate3d(" +
    (x + ev.pageX - dragStartX) + "px, " +
    (y + ev.pageY - dragStartY) + "px, 0)";
}

function pointerUp(ev) {
  scrollInner.removeEventListener("pointermove", pointerMove);
  scrollInner.removeEventListener("pointerup", pointerUp);

  x = x + ev.pageX - dragStartX;
  y = y + ev.pageY - dragStartY;
}

var x = 0;
var y = 0;
var dragStartX = 0;
var dragStartY = 0;

var handle = document.getElementById("handle");
var scrollInner = document.getElementById("scroll-inner");
handle.addEventListener("pointerdown", pointerDown);