Skip to content

Added Offcanvas scroll after close option#40553

Closed
Xcreen wants to merge 9 commits into
twbs:mainfrom
Xcreen:offcanvas_scroll_after_close_option
Closed

Added Offcanvas scroll after close option#40553
Xcreen wants to merge 9 commits into
twbs:mainfrom
Xcreen:offcanvas_scroll_after_close_option

Conversation

@Xcreen

@Xcreen Xcreen commented Jun 12, 2024

Copy link
Copy Markdown

Description

I added a option scrollAfterClose to be able to disable the scrolling to the offcanvas toggler after the offcanvas is closed.

Motivation & Context

Currently after the offcanvas is closed, the body always scrolling back to the offcanvas toggler position.
When enable offcanvas bodyscrolling and add anchor-links into the offcanvas, the links dont work.

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would change existing functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • I have added tests to cover my changes
  • All new and existing tests passed

Live previews

Related issues

Closes #38070

@Xcreen Xcreen requested a review from a team as a code owner June 12, 2024 13:23
@patrickhlauke

Copy link
Copy Markdown
Member

noting that this isn't about scrolling. scrolling is a side effect of focus being (correctly) set back to the element that triggered the offcanvas. so, at the very least, rename this to be about focus, not scroll.

@Xcreen

Xcreen commented Jul 12, 2024

Copy link
Copy Markdown
Author

As suggested, I have changed the name of the option.

scrollAfterClose > focusAfterClose

@XhmikosR

Copy link
Copy Markdown
Member

Unfortunately, this still needs tests.

@mdo

mdo commented Jun 28, 2026

Copy link
Copy Markdown
Member

Superseded by #42544 for v6. The underlying problem here — closing the panel scrolls the page back to the toggler, breaking anchor links inside it — is resolved in v6's Drawer by restoring focus with { preventScroll: true } (focus still returns to the trigger for accessibility, but the page no longer jumps). v6 also renamed Offcanvas to Drawer, so this patch to offcanvas.js no longer applies.

The configurable opt-out this PR adds (scrollAfterClose / focusAfterClose) was not carried over — if you still want an API to skip focus-restore entirely, please open a fresh feature request against v6-dev.

Closing.

@mdo mdo closed this Jun 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

offcanvas scrolls back to trigger element on close

5 participants