From 9fc6f968a4c9502a283d021a8d64d59601dd951d Mon Sep 17 00:00:00 2001 From: Clauderic Demers Date: Thu, 6 Jun 2024 20:05:51 -0400 Subject: [PATCH] Fix auto-scroller bugs --- .changeset/bug-fixes.md | 1 + .../src/core/plugins/scrolling/Scroller.ts | 6 +++++- .../scroll/getScrollableAncestors.ts | 20 +++++++++++-------- 3 files changed, 18 insertions(+), 9 deletions(-) diff --git a/.changeset/bug-fixes.md b/.changeset/bug-fixes.md index 2bc5d162..a9c7b3c2 100644 --- a/.changeset/bug-fixes.md +++ b/.changeset/bug-fixes.md @@ -6,3 +6,4 @@ - `draggable`: Fixed a bug where the `element` was not properly being set on initialization - `feedback`: Fixed a bug with optimistic re-ordering. +- `scroller`: Fixed a bug with auto-scrolling when target is position fixed diff --git a/packages/dom/src/core/plugins/scrolling/Scroller.ts b/packages/dom/src/core/plugins/scrolling/Scroller.ts index 604303a5..e16c7e65 100644 --- a/packages/dom/src/core/plugins/scrolling/Scroller.ts +++ b/packages/dom/src/core/plugins/scrolling/Scroller.ts @@ -15,7 +15,7 @@ import type {DragDropManager} from '../../manager/index.ts'; import {ScrollIntentTracker} from './ScrollIntent.ts'; export class Scroller extends CorePlugin { - public getScrollableElements: () => Element[] | null; + public getScrollableElements: () => Set | null; private scrollIntentTracker: ScrollIntentTracker; @@ -51,6 +51,8 @@ export class Scroller extends CorePlugin { } } + console.log(element); + return element ? getScrollableAncestors(element, {excludeElement: false}) : null; @@ -98,6 +100,8 @@ export class Scroller extends CorePlugin { const elements = this.getScrollableElements(); + console.log(elements); + if (!elements) { return false; } diff --git a/packages/dom/src/utilities/scroll/getScrollableAncestors.ts b/packages/dom/src/utilities/scroll/getScrollableAncestors.ts index 01dbb935..c61952cb 100644 --- a/packages/dom/src/utilities/scroll/getScrollableAncestors.ts +++ b/packages/dom/src/utilities/scroll/getScrollableAncestors.ts @@ -17,12 +17,12 @@ const defaultOptions: Options = { export function getScrollableAncestors( element: Node | null, options: Options = defaultOptions -): Element[] { +): Set { const {limit, excludeElement} = options; - const scrollParents: Element[] = []; + const scrollParents = new Set(); - function findScrollableAncestors(node: Node | null): Element[] { - if (limit != null && scrollParents.length >= limit) { + function findScrollableAncestors(node: Node | null): Set { + if (limit != null && scrollParents.size >= limit) { return scrollParents; } @@ -33,9 +33,9 @@ export function getScrollableAncestors( if ( isDocument(node) && node.scrollingElement != null && - !scrollParents.includes(node.scrollingElement) + !scrollParents.has(node.scrollingElement) ) { - scrollParents.push(node.scrollingElement); + scrollParents.add(node.scrollingElement); return scrollParents; } @@ -48,7 +48,7 @@ export function getScrollableAncestors( return scrollParents; } - if (scrollParents.includes(node)) { + if (scrollParents.has(node)) { return scrollParents; } @@ -58,10 +58,14 @@ export function getScrollableAncestors( if (excludeElement && node === element) { // no-op } else if (isScrollable(node, computedStyle)) { - scrollParents.push(node); + scrollParents.add(node); } if (isFixed(node, computedStyle)) { + const {scrollingElement} = node.ownerDocument; + + if (scrollingElement) scrollParents.add(scrollingElement); + return scrollParents; }