読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

scrollToの挙動について

JavaScript

JavaScriptを書くコトはまだ仕事ではないのですが、少しずつできるようになれたらいいなぁと思いつつ。
他人のコードを真っ当に盗み見できるのは良いことですね。←もはや盗み見でもなんでもないw

で、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)

テストしたコード

よかったら試してみてくださいな。

JavaScript挙動不審すぎるわー。
ハマったというより、釈然としない気持ちの悪い感じですねw

どなたか解説してください・・。