IEでscrollTopプロパティが効かない場合がある

今日はJavaScriptのお話。

うちの会社で作ってる業務システムで奇妙な動きをしてる所があって、そこの部分の解決策の調査を依頼されて、最終的に解決したので忘れないうちに記録に残しとく。


1. 問題部分

次のようなコードがあったとします。

<div id="Scroller" style="overflow:auto;width:100px;height:100px;">
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</div>

この時、高さ100幅100のブロック要素に対して縦のスクロールバーが表示されます。今回の場合、もともとやりたかったことは、スクロールバーが表示されているブロック要素に対して、表示時にスクロールバーを一番下まで持っていきたいということでした。

で、もともとのソースで、どうやってたかというと

$("#Scroller").get(0).scrollTop = 100000000;

ってやってた(※jQueryを使用しています)。なるほど、スクロールバーの位置にありえんくらい大きい値をセットして一番したまで移動させているわけです。通常であればこれで問題なく動作していました。でも、ここでIEの拡大レベル(画面右下にちょこっと出てるでしょ？)を変えるとなぜか動かなくなった。

しかも、ある倍率では動くけど、ある倍率では動かない、という奇妙な現象だった。



2. 解決

たとえば125%の時などは、うまく動いてなかった。IEのデバッガ(開発者ツール。これ使いにくいよね・・・)で該当部分をステップ実行すると、どうもscrollTopに0が入っているようだ。拡大レベルが100%の時はブロック要素内のスクロールバー位置の最大値がきちんと入ってたのに、拡大レベルが125%の時は0が入ってる。

ここでちょっと閃いたヽ(ﾟ∀ﾟ)ﾉ ﾊﾟｯ☆

代入してる数字が大きすぎるっちゃない？！


と思って、試しに2桁減らしてみたらなんと動いた。

$("#Scroller").get(0).scrollTop = 1000000;

ああ、なんて簡単な・・・。実際に、そのブロック要素が最大でどれくらいの高さになるのかをきちんと見積もってみたら10000(いちまん)もあれば十分だった。かなり余裕をもってその10倍にしたとしても100000(じゅうまん)だ。もともと指定されてた数値は100000000(いちおく)。なんという欲張り。

ということで、代入する数値を小さくしたら解決しました。実際にどれくらい大きな値だとダメなのか、とかの検証はしてないので正確な境界値はわかりません。