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

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

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

Asked on Jun 07, 2025

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.

Ask any question about Bootstrap here... and get an instant response.

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

Asked on Jun 07, 2025

Answer

The Q&A Network