iPhone、Android共に、touchmoveのデフォルト動作を止めることでページスクロールを禁止することができます。
すなわち、
JavaScript
document.addEventListener("touchmove", function(evt) { evt.preventDefault(); }, false);
この記述でページスクロールを禁止したページをつくれます。
また、iOS8のiPhone6、Android4.2.2のGALAXY NEXUSでは同時にピンチの拡大縮小も動作しなくなりました。
これを活かして、タッチしているポイントを割り出すページをつくってみました。
こんなページを作る際はデフォルトのページスクロールを禁止しておかないとうまく動作しません。
(height: 100% のページでもiPhoneだとばいーんとスクロールしてしまいます)
一応、スマートフォンでもPCでも動作するように調整してあります。
HTML
<canvas id="canvas" class="box"></canvas> <div id="grid"></div>
JavaScript
(function(win, doc) { "use strict"; var grid = doc.getElementById("grid"), canvas = doc.getElementById("canvas"), ctx = canvas.getContext("2d"), TOUCH_AREA_WIDTH = 300, TOUCH_AREA_HEIGHT = 360, GRID_SIZE = 10, START, MOVE, END; if (/iphone|ipod|ipad|android/.test(navigator.userAgent.toLowerCase())) { START = "touchstart"; MOVE = "touchmove"; END = "touchend"; } else { START = "mousedown"; MOVE = "mousemove"; END = "mouseup"; } grid.addEventListener(MOVE, function(evt) { var offsetX = (typeof evt.offsetX === "number") ? evt.offsetX : evt.touches[0].clientX - parseInt(grid.offsetLeft, 10), offsetY = (typeof evt.offsetX === "number") ? evt.offsetY : evt.touches[0].clientY - parseInt(grid.offsetTop, 10), x = Math.round(offsetX / GRID_SIZE), y = Math.round(offsetY / GRID_SIZE); x = (x < 0) ? 0 : (x > TOUCH_AREA_WIDTH / GRID_SIZE) ? TOUCH_AREA_WIDTH / GRID_SIZE : x; y = (y < 0) ? 0 : (y > TOUCH_AREA_HEIGHT / GRID_SIZE) ? TOUCH_AREA_HEIGHT / GRID_SIZE : y; grid.innerText = y * (TOUCH_AREA_WIDTH / GRID_SIZE) + x; }, false); // ページスクロールを止める doc.addEventListener(MOVE, function(evt) { evt.preventDefault(); }, false); })(this, document);
SCSS
@import "compass/reset"; html { height: 100%; } body { position: relative; height: 100%; background: #e4e4e4; } #canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #grid { position: absolute; top: 50%; left: 50%; margin: -180px -150px; width: 300px; height: 360px; background: rgba(200, 0, 0, .2); color: rgba(200, 0, 0, .2); font: 100px Copperplate, sans-serif; line-height: 360px; text-align: center; }