BootstrapのOffcanvasでスクロールバーのガタつきを防ぐ方法

BootstrapのOffcanvasを利用する際に、data-bs-scroll属性をtrueに設定しておくことをおすすめします。なぜなら、この属性がfalseだと、Offcanvasが表示された時にbodyのoverflowがhiddenになります。その結果、Windowsではスクロールバーが消え、width: 100vwなどのコンテンツのサイズが変わり、表示がガタつくことがあるからです。

以下のように、data-bs-scroll属性をtrueに設定します。

<div class="offcanvas" data-bs-scroll="true">
...
</div>

この設定により、Offcanvasが表示されてもスクロールバーが消えず、コンテンツのサイズ変更による表示のガタつきを防ぐことができます。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

上部へスクロール