How do I allow the page to scroll while an offcanvas is open?

Asked on Jun 18, 2025

1 Answer

In Bootstrap 5, the default behavior is to prevent the page from scrolling when an offcanvas component is open. To allow scrolling, you can modify the offcanvas options using JavaScript. Here's how you can achieve this:

<!-- BEGIN COPY / PASTE -->
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
            Toggle Offcanvas
        </button>

        <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <p>Content for the offcanvas goes here.</p>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `data-bs-scroll="true"` attribute on the `
` element to enable page scrolling while the offcanvas is open.
Ensure that the offcanvas component is correctly targeted using `data-bs-target` and `id` attributes.
The `btn-close` element is used to close the offcanvas.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions