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)