2

javascript でスクロールバーの表示/非表示が切り替わった時に発生するイベントはありますか。
何らかの方法でスクロールバーの表示/非表示の変化を検出することは出来るでしょうか。

動的に表示内容が変化するWebサイトを中央寄せで作っている場合、
表示コンテンツが増えてスクロールバーが表示されると、
スクロールバーの幅の分だけ表示領域が狭くなるため、全体の表示が少し左にずれます。
逆に表示コンテンツが減ってスクロールバーが非表示になると、全体の表示が右にずれます。
このガタつきを防ぎたいです。

body {
  overflow-y: scroll;
}

このようにスクロールバーを常に表示する方法もあるかと思いますが、
必要のないときにはスクロールバーを表示させたくないです。
スクロールバーが非表示の時には

body {
  padding-right: 17px;
}

とすることで、スクロールバーが表示されている時と同じ位置に表示できますので、
スクロールバーの表示/非表示を検出できれば解決できるのではないかと思い質問しました。

1 件の回答 1

1

スクロールバーの表示/非表示では、Windowの幅は変わらないのでwindow.resizeイベントは発生しません。それでbody.resizeイベントがあってもいいように思うのですが、そういうイベントは発生しません。

こういう場合に使えるResize Observerという規格が提案されています。残念ですが現状で実装されているにはChromeだけです。resize-observer-polyfillが公開されているのでそれを使ってもいいかもしれませんが若干問題が残っているようです。

一方、英語版を探すと今回と同じ質問「Detect when window vertical scrollbar appears」に実際に使えると思われる回答があります。100%の幅のiframeを見えないように置いてそれのwindow.resizeイベントを取得するというものです。サンプルコードは以下にあります。現状ではこちらを使った方がいいように思います。

https://gist.github.com/OrganicPanda/8222636

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。