← 一覧へ

registerScrollbarWidth

window.innerWidth - document.documentElement.clientWidth でスクロールバーの実幅を測り、:root の --scrollbar CSS変数へ反映する、依存ゼロの素のJS。
オプション引数は無く、呼び出すだけでよい。ページ読み込み時(load)と、幅だけが変化したときに発火する独自イベント resizeWidth(form-snippets/snippets/Utils.js が dispatch)のタイミングで再計測する。
固定要素の余白に calc(1rem + var(--scrollbar)) のように加算すれば、スクロールバーの有無によるガタつきを防げる。
だいたいは0pxになります。

--scrollbar の値を表示

registerScrollbarWidthで取得した値を表示するデモ。

--scrollbar: -

コードを見る
import { registerScrollbarWidth } from 'form-snippets';
registerScrollbarWidth();

// 以降どこでも参照できる
// padding-right: calc(1rem + var(--scrollbar));