スマホサイトでオーバーレイ Part 2

スマホサイトでオーバーレイについて以前に書いたけど、今でもポップアップダイアログ的な表示をしているスマホサイトを見かけると、わざわざ Android でも開いてどのような挙動をするか確認し、さらには PC のブラウザでデベロッパーツールを使ってチェックする職業病に陥っている。

今日は Ameba のサイト。画面左上のメニューボタンを押すと、メニューがオーバーレイする形で表示されるのだけど、Android でも下層の要素が反応せずにうまくいっている。

メニュー表示時には下層レイヤー(本体のコンテンツ)の上に、ヘッダーを除くページ全域に白い半透明の #overlay レイヤー、さらにその上にメニュー(#amb_menu)レイヤーを配置する構造になっている。この #overlay レイヤーに対して、以下の disable() 関数が適用され、タップイベントを抑制する仕組み。

disable: function() {
    function t(e) {
        e.stopPropagation();
        e.preventDefault()
    }
    var e = this;
    ["touchstart", "touchend", "touchmove", "mouseover", "mouseout", "mousedown", "mouseup", "click"].forEach(function(n) {
        e.on(n, t)
    });
    return e
}

この方法だと #overlay レイヤー上に指を置いてドラッグしてもスクロールできなくなってしまうが、Ameba のメニューレイヤーは画面幅の八割程を占めているので特に気にならない。但し、横長レイアウトの場合には、#overlay レイヤーでスクロールできないことが気になってくる。

オーバーレイで表示させるコンテンツ領域(今回の例だとメニュー)の幅が大きい場合は、Ameba のように間に一個レイヤー(#overlay)を挟んで、そのレイヤーのタップイベントを抑制してしまうのが良さそう。

Last updated on July 8, 2015