スマートフォンで、ロード完了時にアドレスバーを隠すアレの改良版

こんにちわ。ソフトウェア開発部の丹です。

今回はJavaScriptについてです。

スマートフォンでの表示スペースを少しでも確保する為に、1px スクロールさせてアドレスバーを隠してしまうテクニックがありますが、

これだと読み込みながらスクロールしていても、強制的に一番上に戻らされるというデメリットがあります。

それが嫌なので少し改造してみました。

旧1pxスクロール

window.onload = function(){
    setTimeout("scrollTo(0,1)", 1);
};

改造した1pxスクロール

window.onload = function(){
    if(document.body.scrollTop == 0){
        setTimeout(function(){scrollTo(0,1)}, 1);
    }
};

ページ読み込み時(window.onload)に

その時のスクロール位置(document.body.scrollTop)を取得し、

もし(if)スクロールしていない(== 0)だったら

ズラす(function(){scrollTo(0,1)})という風にしています。

ズラすタイミングを変えたい時は、setTimeoutの行の最後の数字(1)を変えて下さい。

追記 7/11

jQueryを使う場合は、

$(function(){...})

を使った方が実行タイミング的にベターです。

また、setTimeout内は

setTimeout("scrollTo(0,1)", 1);

より

setTimeout(function(){scrollTo(0,1)}, 1);

の方が処理が早い様です。