scrollToの挙動について
JavaScriptを書くコトはまだ仕事ではないのですが、少しずつできるようになれたらいいなぁと思いつつ。
他人のコードを真っ当に盗み見できるのは良いことですね。←もはや盗み見でもなんでもないｗ
で、scrollTo関数の挙動について気になる点＋ハマった点があったのでメモ。
スマートフォンでアドレスバーを隠す処理
よくあるやつです。
var hideAddressBar = function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 100); }; document.addEventListener('DOMContentLoaded', hideAddressBar, false);
setTimeoutはなくても良い気はしますが、あった方がより多くの機種・環境にそれっぽく対応できるとのこと。
なんか読み込み遅い機種とかあるらしい。
読み込まれた画面を、無理やりスクロールさせて、アドレスバーを引っ込ませるんですね。
で、さもありなライブラリだと、これを汎用的に記述してたりします。
より汎用的な関数に
こんな具合に。
var scrollHandler = function(x, y, t){ setTimeout(function(){ window.scrollTo(x || 0, y || 1); }, t || 100); }; document.addEventListener('DOMContentLoaded', scrollHandler, false); // clickでも使える！汎用的っしょ！ elem.addEventListener('click', scrollHandler(0, 200, 0), false);
そしてハマる(本題)
今回メモしておきたかったのは、
このscrollTo関数に対して数値以外が渡されるとどうなるか
です。
結論から書くと、
「数値(として解釈できそうにない)値は、0として扱われる」
みたいです。
(実際そうなってるのか、たまたま同じ挙動なのか、わからないので、「みたい」ですにとどめてます・・。)
上述した汎用的なコードは、実はこんな挙動になってます。
var scrollHandler = function(x, y, t){ // xにclickのイベントオブジェクト、その他にはundefinedが渡される setTimeout(function(){ window.scrollTo(x || 0, y || 1); // Event, 1 }, t || 100); // undefinedのため100 }; document.addEventListener('DOMContentLoaded', scrollHandler, false); // 100㍉秒後に、scrollTo(Event, 1)を実行 // Eventってなんやねん！てことで0扱い
scrollTo関数にいろいろ渡してみる
この関数には数値しか渡させないと思ってましたが、いろいろ渡してみると意外に動いた。
エラーになってくれれば良いのに・・・。
以下はテスト結果です。
| No. | 引数 | typeof | 挙動 | 備考 |
|---|---|---|---|---|
| 01 | 10 | number | scrollTo(100, 1) | 数値扱い |
| 02 | '10' | string | scrollTo(100, 1) | 数値扱い |
| 03 | true | boolean | scrollTo(0, 1) | |
| 04 | Event | object | scrollTo(0, 1) | |
| 05 | [100,10] | object | scrollTo(0, 1) | |
| 06 | [100] | object | scrollTo(100, 1) | 数値扱い |
| 07 | {x:100,y:100} | object | scrollTo(0, 1) | |
| 08 | function(){} | function | scrollTo(0, 1) | |
| 09 | null | object | scrollTo(0, 1) | |
| 10 | undefined | undefined | scrollTo(0, 1) |
