iPhoneでSafariのブラウザのページスクロールを禁止する

iPhone、Android共に、touchmoveのデフォルト動作を止めることでページスクロールを禁止することができます。

すなわち、

JavaScript

document.addEventListener("touchmove", function(evt) {
    evt.preventDefault();
}, false);

この記述でページスクロールを禁止したページをつくれます。

また、iOS8のiPhone6、Android4.2.2のGALAXY NEXUSでは同時にピンチの拡大縮小も動作しなくなりました。

これを活かして、タッチしているポイントを割り出すページをつくってみました。
こんなページを作る際はデフォルトのページスクロールを禁止しておかないとうまく動作しません。
（height: 100% のページでもiPhoneだとばいーんとスクロールしてしまいます）

一応、スマートフォンでもPCでも動作するように調整してあります。

DEMO

スマートフォン用のDEMOはこちら

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;
}