How to prevent scrollbars from rattling in Bootstrap’s Offcanvas

When using Bootstrap’s Offcanvas, it is recommended to set the data-bs-scroll attribute to true. Because if this attribute is false, the body overflow will be hidden when Offcanvas is displayed. As a result, the scrollbars will disappear on Windows, and content such as width: 100vw will change size, which may cause the display to wobble.

Set the data-bs-scroll attribute to true as follows

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

This setting ensures that the scrollbars do not disappear when the offcanvas is displayed and prevents display wobble due to content resizing.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top