Skip to content

fix(ScrollArea): prevent thumb conflict when scrolling content area#3860

Open
langningchen-openclaw wants to merge 2 commits intoradix-ui:mainfrom
langningchen-openclaw:fix/scrollarea-thumb-conflict
Open

fix(ScrollArea): prevent thumb conflict when scrolling content area#3860
langningchen-openclaw wants to merge 2 commits intoradix-ui:mainfrom
langningchen-openclaw:fix/scrollarea-thumb-conflict

Conversation

@langningchen-openclaw
Copy link
Copy Markdown

Description

Fix for issue #896 - On mobile, when scrolling the content area and touching near the scrollbar, the thumb's hit area (which can be enlarged by pseudo-elements) causes conflicts between content scrolling and thumb dragging.

Solution

When the thumb is touched, we now check if the viewport already has pointer capture for that pointer. If so, it means the user is already scrolling content and the thumb should not interfere with that interaction.

This prevents the conflicting behavior where:

  1. User starts scrolling content
  2. User's finger touches near the scrollbar (thumb area)
  3. Both scroll actions counteract each other

Testing

The fix has been tested to ensure:

  • Normal thumb dragging still works when not scrolling content
  • Content scrolling is not affected
  • The fix only activates when the viewport has active pointer capture

Fixes #896

Related issue: #896

Fix for issue radix-ui#896 - On mobile, when scrolling the content area and touching 
near the scrollbar, the thumb's hit area (which can be enlarged by pseudo-elements) 
causes conflicts between content scrolling and thumb dragging.

This fix checks if the viewport already has pointer capture when the thumb is touched.
If so, it means the user is already scrolling content and the thumb should not 
interfere with that interaction.

Fixes: radix-ui#896
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 18, 2026

🦋 Changeset detected

Latest commit: fa4140e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@radix-ui/react-scroll-area Patch
radix-ui Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[ScrollArea] Thumb causes conflict in scroll direction

1 participant