scroll fix inside parent

adumesny · adumesny · commit 58f518a07813 · 2026-03-30T18:41:27.000-07:00
* fix gridstack#2074 * we now use immediate parent and not just page for scrolling. * updated two.html to showcase both scroll options
diff --git a/demo/two.html b/demo/two.html
@@ -10,14 +10,21 @@
   <link rel="stylesheet" href="demo.css"/>
   <style type="text/css">
     .with-lines { border: 1px dotted #777}
+    .scroll-container {
+      max-height: 500px;
+      overflow-y: auto;
+      border: 2px solid #aaa;
+      border-radius: 4px;
+      padding: 10px;
+    }
   </style>
 
   <script src="../dist/gridstack-all.js"></script>
 </head>
 <body>
   <div class="container-fluid">
-    <h1>Two grids demo</h1>
-    <p>Two grids, one floating one not, showing drag&drop from sidebar and between grids.
+    <h1>Two grids demo, with scroll containers</h1>
+    <p>Two grids, one floating one not, showing drag&drop from sidebar and between grids. Using scoll containers to test.
     <br>New v10.2: use 'Esc' to cancel any move/resize. Use 'r' to rotate as you drag.</p>
 
     <div class="row">
@@ -51,11 +58,14 @@ <h1>Two grids demo</h1>
       <div class="col-md-6">
         <a onClick="toggleFloat(this, 0)" class="btn btn-primary" href="#">float: true</a>
         <a onClick="compact(0)" class="btn btn-primary" href="#">Compact</a>
-        <div class="grid-stack" id="left_grid"></div>
+        <div class="scroll-container">
+          <div class="grid-stack" id="left_grid"></div>
+        </div>
       </div>
       <div class="col-md-6">
         <a onClick="toggleFloat(this, 1)" class="btn btn-primary" href="#">float: false</a>
         <a onClick="compact(1)" class="btn btn-primary" href="#">Compact</a>
+        page scroll test
         <div class="grid-stack" id="right_grid"></div>
       </div>
     </div>
@@ -68,7 +78,7 @@ <h1>Two grids demo</h1>
       {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
@@ -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
@@ -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;
