From 58f518a07813446bb0d592e4363b28d15e69fa59 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Mon, 30 Mar 2026 18:41:27 -0700 Subject: [PATCH] scroll fix inside parent * fix #2074 * we now use immediate parent and not just page for scrolling. * updated two.html to showcase both scroll options --- demo/two.html | 18 ++++++++++++++---- doc/CHANGES.md | 2 +- src/gridstack.ts | 11 +++++------ 3 files changed, 20 insertions(+), 11 deletions(-) diff --git a/demo/two.html b/demo/two.html index bd3bf9caa..8320bf380 100644 --- a/demo/two.html +++ b/demo/two.html @@ -10,14 +10,21 @@
-

Two grids demo

-

Two grids, one floating one not, showing drag&drop from sidebar and between grids. +

Two grids demo, with scroll containers

+

Two grids, one floating one not, showing drag&drop from sidebar and between grids. Using scoll containers to test.
New v10.2: use 'Esc' to cancel any move/resize. Use 'r' to rotate as you drag.

@@ -51,11 +58,14 @@

Two grids demo

float: true Compact -
+
+
+
float: false Compact + page scroll test
@@ -68,7 +78,7 @@

Two grids demo

{x: 1, y: 1}, // intentional overlap to test collision on load {x: 3, y: 1}, {x: 2, y: 3, w: 3, maxW: 3, content: 'has maxW=3'}, - {x: 2, y: 5} + {x: 2, y: 5, h:20} ]; items.forEach((item, i) => item.content = item.content || String(i)); diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 8eb8af372..1c0339481 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -139,7 +139,7 @@ Change log ## 12.4.3 (TBD) * fix: [#3237](https://github.com/gridstack/gridstack.js/pull/3237) updateOptions() fixes for columnOpts, maxRow. load() not cloning * fix: [#3241](https://github.com/gridstack/gridstack.js/pull/3241) drifting rounding issue when cellHeight is small/fraction -* fix: [#2188](https://github.com/gridstack/gridstack.js/issues/2188) scroll speed too high +* fix: [#2188](https://github.com/gridstack/gridstack.js/issues/2188), [#2074](https://github.com/gridstack/gridstack.js/issues/2074) scroll speed too high, not animating, not using container parent ## 12.4.2 (2025-12-26) * regression: [#3214](https://github.com/gridstack/gridstack.js/issues/3214) touch device with real mouse event fix (caused by #3191 in last release) diff --git a/src/gridstack.ts b/src/gridstack.ts index 6beccabee..2069b3668 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -3035,9 +3035,10 @@ export class GridStack { return 0; } - /** @internal starts or continues auto-scroll when the dragged element is clipped by the scroll container */ + /** @internal starts or continues auto-scroll when the dragged element is clipped by the scroll container. + * Uses the grid's own element to find the scroll container so external/sidebar drags work too (#2074). */ protected _updateScrollPosition(el: HTMLElement): void { - const scrollEl = Utils.getScrollElement(el); + const scrollEl = Utils.getScrollElement(this.el); if (!scrollEl) return; this._autoScrollEl = el; this._autoScrollContainer = scrollEl; @@ -3059,12 +3060,10 @@ export class GridStack { const clipping = this._getClipping(el, scrollEl); if (clipping === 0) { this._stopScrolling(); return; } - const scrollRect = scrollEl.getBoundingClientRect(); const viewportH = window.innerHeight || document.documentElement.clientHeight; - const containerH = Math.min(scrollRect.height, viewportH); - const maxSpeed = Math.max(containerH / 75, 2); + const maxSpeed = Math.max(viewportH / 75, 4); const absPx = Math.abs(clipping); - const speed = Math.min(absPx * 0.3, maxSpeed); + const speed = Math.min(absPx * 0.6, maxSpeed); const scrollAmount = clipping > 0 ? speed : -speed; const prevScroll = scrollEl.scrollTop;