こんにちわ。ソフトウェア開発部の丹です。
今回はJavaScriptについてです。
スマートフォンでの表示スペースを少しでも確保する為に、1px スクロールさせてアドレスバーを隠してしまうテクニックがありますが、
これだと読み込みながらスクロールしていても、強制的に一番上に戻らされるというデメリットがあります。
それが嫌なので少し改造してみました。
旧1pxスクロール
|
<code>window.onload = function(){ setTimeout("scrollTo(0,1)", 1); }; </code> |
改造した1pxスクロール
|
<code>window.onload = function(){ if(document.body.scrollTop == 0){ setTimeout(function(){scrollTo(0,1)}, 1); } }; </code> |
ページ読み込み時(window.onload
)に
その時のスクロール位置(document.body.scrollTop
)を取得し、
もし(if
)スクロールしていない(== 0
)だったら
ズラす(function(){scrollTo(0,1)}
)という風にしています。
ズラすタイミングを変えたい時は、setTimeout
の行の最後の数字(1
)を変えて下さい。
追記 7/11
jQueryを使う場合は、
|
<code>$(function(){...}) </code> |
を使った方が実行タイミング的にベターです。
また、setTimeout内は
|
<code>setTimeout("scrollTo(0,1)", 1); </code> |
より
|
<code>setTimeout(function(){scrollTo(0,1)}, 1); </code> |
の方が処理が早い様です。