Skip to content

fix: treat sticky elements as scrollable ancestors, not fixed#1984

Open
clauderic wants to merge 1 commit into
mainfrom
fix/issue-1756-sticky-autoscroll
Open

fix: treat sticky elements as scrollable ancestors, not fixed#1984
clauderic wants to merge 1 commit into
mainfrom
fix/issue-1756-sticky-autoscroll

Conversation

@clauderic

Copy link
Copy Markdown
Owner

Fixes #1756

Summary

The isFixed utility was returning true for both position: fixed and position: sticky elements. In getScrollableAncestors, when an isFixed element was encountered, traversal would stop immediately and fall back to document.scrollingElement — bypassing any actual scrollable containers in between.

This is correct for position: fixed (which is positioned relative to the viewport and has no scrollable DOM ancestors), but incorrect for position: sticky. Sticky elements remain part of the normal document flow and still scroll with their nearest scroll container. Treating them as fixed caused autoscroll to skip the actual scrollable ancestor (e.g. a scrollable table container) and use the document scroll element instead, breaking horizontal autoscroll in sticky table headers.

The fix removes position: sticky from the isFixed check so sticky elements are treated normally during scroll ancestor traversal.

Test plan

  • Set up a sortable list inside a position: sticky table header with a horizontally scrollable container
  • Drag a column header toward the edge of the visible area
  • Verify that the container scrolls horizontally as expected

Automated fix by Claude Code

@changeset-bot

changeset-bot Bot commented Mar 31, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 5f34fed

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

This PR includes changesets to release 10 packages
Name Type
@dnd-kit/dom Patch
@dnd-kit/abstract Patch
@dnd-kit/collision Patch
@dnd-kit/geometry Patch
@dnd-kit/helpers Patch
@dnd-kit/react Patch
@dnd-kit/state Patch
@dnd-kit/vue Patch
@dnd-kit/solid Patch
@dnd-kit/svelte 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

@pkg-pr-new

pkg-pr-new Bot commented Mar 31, 2026

Copy link
Copy Markdown

Open in StackBlitz

@dnd-kit/abstract

npm i https://pkg.pr.new/@dnd-kit/abstract@1984

@dnd-kit/collision

npm i https://pkg.pr.new/@dnd-kit/collision@1984

@dnd-kit/dom

npm i https://pkg.pr.new/@dnd-kit/dom@1984

@dnd-kit/geometry

npm i https://pkg.pr.new/@dnd-kit/geometry@1984

@dnd-kit/helpers

npm i https://pkg.pr.new/@dnd-kit/helpers@1984

@dnd-kit/react

npm i https://pkg.pr.new/@dnd-kit/react@1984

@dnd-kit/solid

npm i https://pkg.pr.new/@dnd-kit/solid@1984

@dnd-kit/state

npm i https://pkg.pr.new/@dnd-kit/state@1984

@dnd-kit/svelte

npm i https://pkg.pr.new/@dnd-kit/svelte@1984

@dnd-kit/vue

npm i https://pkg.pr.new/@dnd-kit/vue@1984

commit: 5f34fed

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.

[experimental] autoscroll fails when sortable items live within sticky container

1 participant