スマホ用サイトでアドレスバーを隠している時の強制スクロール回避方法

iPhone等のスマホ用サイトを制作する際に少しでも表示領域を広くするためにアドレスバーを非表示にすることが多いのですが、今まで以下のように記述していました。

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

「非表示」というよりは「強制スクロール」で見えない位置まで動かしているだけです。

ただ、この方法だと他ページのページ内リンク(アンカー)へ飛ばそうとする際にうまく飛ばずにページ上部へ飛んでしまいます。

そこで以下のように記述を変えることで回避。

function doScroll() { if (window.pageYOffset === 0) { window.scrollTo(0,1); } }
window.onload = function() { setTimeout(doScroll, 100); }

iPhoneでしかチェックできていないですが今のとこはこれで。

    • Captain
    • 8月 20th, 2013 10:09am

     このロケーションバーを隠す術(わざ)、やたら見かけるんだけど〝scrollBy〟で良いんだよね
     アンカーリンク対策も不要

     あと (0, 0) でも隠れるから、アンドは知らんけど
     何なら (1, 0) とか試したら? とか思います

  1. No trackbacks yet.