JavaScript でスクロールバーの幅を取得し、CSS でレイアウトを最適化する方法 - Qiita

OSやブラウザのスクロールバーによって、レイアウトが崩れたり、意図しない余白が生じたりするなど、コンテンツの表示が影響を受けることはよくあります。例えば、テキストの改行位置が変わり、デザインとのずれが生じるなどです。 通常は特に気にする必要はありませんが、特定のコンテンツ内でのみスクロールを制御する必要があったため、スクロールバーの影響を受けずにコンテンツを表示する方法を探したところ、以下の方法を見つけました。 See the Pen Calculate Scrollbar Size by H. Maniwa (@HManiwa) on CodePen. ※ なぜかCodepenが表示されません😣 CSS scrollbar-gutterプロパティでスクロールバーの表示領域を確保し、CSSカスタム変数で設定したスクロールバーの幅をコンテンツの余白から差し引きます。 scrollbar-g