最近知ったJavascript,HTML,CSSの常識②〜display: none;の要素のスクロール位置取得〜

COLUMN コラム

HTML上、display: none;が指定されている要素のスクロール位置は取得することができない。

これ最近現場で知りました…。

ChromeやEdgeではdisplay: none;が指定されている場合、常にscrollTop: 0が取得されます。

ということはつまり、スクロール位置の書き換えもできないという訳なんです。

現場で使用しているBootstrapのバージョン3.3.4ではdisplay: none;とopacity: 0;を使用してモーダルの制御を行なっているようで、モーダル非表示時に先頭までスクロールしておくことができず、現場で盛大に躓きました。

（Bootstrapのバージョンが古い件についてはスルーしてください。）

だからと言って、モーダルが描画されたタイミングでスクロールしたら変な挙動になるし、フロント側の構成によっては伝家の宝刀「setTimeout」を召喚するケースも出てきます。

それだけは避けたい。

なぜ表示されないかというと、DOM上は生成されているけど、レンダリングツリー上は生成されていないからのようです。

スクロール位置は描画上の話であって、DOM, CSSOMがスクロール位置を保持していないのは納得感があります…。

opacity: 0;が指定されている場合、display: none;を解除したからといって画面上に表示されるわけではありません。

（まぁ、画面上に描画されるので場合によっては要素のズレが発生するかもですが、その辺はうまいこと調整してもらって）

そのため、モーダル非表示時にモーダル最上部までスクロールしておきたい場合は、display:none;を一瞬だけdisplay: block;に書き換えてからscrollTopを最上部まで移動させればうまくいきます。

今回は別の対処方法を取ることができたので、このやり方はやらなかった訳ですが、今後フロントエンド側の開発をしていたらいずれまた躓くことがありそうなので、頭に入れておきたいと思います。