iPhone の Safari でアドレスバーを隠すときにやってはいけないこと

スマートフォン向けサイトという言葉も下火となったが、良くないテクニックが蔓延しているのでこの記事を書いた。

そのテクニックとは次のようなもの。

window.addEventListener("load", function() {
    setTimeout(function() {
        scrollTo(0, 1);
    }, 100);
}, false);

ページが読み込まれたあとに縦方向にスクロールすることで、本来ユーザがスクロールして隠れるアドレスバーを強制的に隠すやり方。

Web 上を検索すると多数の記事が見つかる。

この方法には問題がある。もしページの読み込みが遅くて、ユーザが先のコンテンツを読むためにページをスクロールしたとしよう。そうすると、ページの読み込みが完了したとたん、このスクリプトによってページのほぼ先頭まで戻ってしまう。*1

解決法の一つに window.pageYOffset の値が 0 かどうかをチェックする方法もある。この方法なら問題ない。

もうひとつエレガントに解決するやり方としては、scrollTo の代わりに scrollBy を使う方法がある。scrollBy では現在のスクロール位置からの相対値を使ってページをスクロールさせることができる。

先ほどのスクリプトを書き直すと次のようになる。

window.addEventListener("load", function() {
    setTimeout(function() {
        scrollBy(0, 1);
    }, 100);
}, false);

あるいは setTimeout が実行遅延時間のあとに第1引数の関数に渡す引数をとれる *2 ことを利用すれば次のように書ける。

window.addEventListener("load", function() {
    setTimeout(scrollBy, 100, 0, 1);
}, false);