Skip to content

[scroll area] Handle touch momentum scrolling for programmatic scroll check #2111

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 2 commits into from
Jun 20, 2025
Merged

[scroll area] Handle touch momentum scrolling for programmatic scroll check #2111

merged 2 commits into from
Jun 20, 2025

Conversation

atomiks
Copy link
Contributor

@atomiks atomiks commented Jun 13, 2025

Since touch devices lack onWheel the scrolling state is unset while in momentum scroll phase: #1908

@atomiks atomiks added bug 🐛 Something isn't working component: scroll area labels Jun 13, 2025
@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented Jun 13, 2025 •
edited
Loading

Open in StackBlitz

npm i https://pkg.pr.new/@base-ui-components/react@2111

commit: cafd369

@mui-bot
Copy link

mui-bot commented Jun 13, 2025 •
edited
Loading

Bundle size report

Total Size Change: 🔺+55B(0.00%) - Total Gzip Change: 🔺+39B(+0.01%)
Files: 41 total (0 added, 0 removed, 2 changed)

Show details for 41 more bundles

@base-ui-components/react parsed: 🔺+28B(+0.01%) gzip: 🔺+13B(+0.01%)
@base-ui-components/react/scroll-area parsed: 🔺+27B(+0.17%) gzip: 🔺+26B(+0.47%)
@base-ui-components/react/accordion parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/alert-dialog parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/avatar parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/checkbox parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/checkbox-group parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/collapsible parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/context-menu parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/dialog parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/direction-provider parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/field parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/fieldset parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/form parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/input parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/menu parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/menubar parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/merge-props parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/meter parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/navigation-menu parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/number-field parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/popover parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/preview-card parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/progress parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/radio parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/radio-group parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/select parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/separator parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/slider parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/switch parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/tabs parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/toast parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/toggle parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/toggle-group parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/toolbar parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/tooltip parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/unstable-no-ssr parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/unstable-use-media-query parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/use-render parsed: 0B(0.00%) gzip: 0B(0.00%)
@base-ui-components/react/utils parsed: 0B(0.00%) gzip: 0B(0.00%)
Base UI checkbox parsed: 0B(0.00%) gzip: 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against cafd369

@netlify Netlify
Copy link

netlify bot commented Jun 13, 2025 •
edited
Loading

✅ Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit cafd369
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/68515d5d1a046b0008a9d9ba
😎 Deploy Preview https://deploy-preview-2111--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 project configuration.

@atomiks atomiks marked this pull request as ready for review June 13, 2025 10:07
romgrk
romgrk reviewed Jun 13, 2025
View reviewed changes
@michaldudak
Copy link
Member

What problem does it solve? Momentum scrolling can last for much more than 100ms - is it enough to treat everything after this duration as programmatic scroll?

@atomiks
Copy link
Contributor Author

atomiks commented Jun 20, 2025

@michaldudak onScroll fires during momentum scrolling in quick succession so it works correctly until the end

@atomiks atomiks merged commit 2cc4e0c into mui:master Jun 20, 2025
22 checks passed
@atomiks atomiks deleted the fix/touch-scroll-area-interaction branch June 20, 2025 09:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@romgrk romgrk romgrk left review comments

@michaldudak michaldudak michaldudak approved these changes

@colmtuite colmtuite Awaiting requested review from colmtuite colmtuite is a code owner

Assignees
No one assigned
Labels
bug 🐛 Something isn't working component: scroll area
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@atomiks @mui-bot @michaldudak @romgrk