Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[useScrollLock] Fix jump with scroll-behavior style #1343

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

atomiks
Copy link
Contributor

@atomiks atomiks commented Jan 17, 2025

Fixes #1340

Unfortunately body { scroll-behavior: smooth } still jumps (when I tried to add the same technique), although it fixes the html case.

A couple of options are possible:

  • Just warn that scroll-behavior should be put on html instead of body. This isn't going to work nicely if Base UI is used as an extension since they can't control third party sites.
  • Fallback to the react-aria hook (+ maybe warn still). This isn't straightforward due to the fact the react-aria lock is disabled on open not mounted, so a position: fixed element (e.g. dialog) shifts while closing if it has an exit animation when the body has inset scrollbars. A bunch of extra code is necessary to ensure this works correctly

@atomiks atomiks added the core Infrastructure work going on behind the scenes label Jan 17, 2025
Copy link

netlify bot commented Jan 17, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit e3a933e
🔍 Latest deploy log https://app.netlify.com/sites/base-ui/deploys/6789a748b64b960008a9a1c4
😎 Deploy Preview https://deploy-preview-1343--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@oliviertassinari oliviertassinari added the component: modal This is the name of the generic UI component, not the React module! label Jan 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: modal This is the name of the generic UI component, not the React module! core Infrastructure work going on behind the scenes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Dialog] Page is scrolled to top when opening the dialog if html { scroll-behavior: smooth }
2 participants