45232


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

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

[code]

    body {
      overflow-y: scroll;
    }
    
[/code]

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

[code]

    body {
      padding-right: 17px;
    }
    
[/code]

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


CC BY-SA 4.0
2018-06-30T11:53:13.070
45191
2018-07-02T12:34:23.213
3925
question
javascript html html5
スクロールバーの表示／非表示イベント


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

こういう場合に使える[`Resize
Observer`という規格](https://wicg.github.io/ResizeObserver/)が提案されています。残念ですが現状で実装されているにはChromeだけです。[`resize-
observer-polyfill`](https://github.com/que-etc/resize-observer-
polyfill)が公開されているのでそれを使ってもいいかもしれませんが若干問題が残っているようです。

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

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


CC BY-SA 4.0
2018-07-02T07:08:16.273
45232
2018-07-02T12:34:23.213
2018-07-02T12:34:23.213
15171
15171
45191
answer