Select scrollable parent

Author: hbcarlos

src/gridstack-dd.ts

@@ -342,7 +342,6 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
   // variables used/cashed between the 3 start/move/end methods, in addition to node passed above
   let cellWidth: number;
   let cellHeight: number;
-  let minRow: number;
 
   /** called when item starts moving/resizing */
   let onStartMoving = (event: Event, ui: DDUIData): void => {
@@ -353,9 +352,6 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
       this._gsEventHandler[event.type](event, target);
     }
 
-    // Saving `minRow`
-    minRow = this.opts.minRow;
-
     this.engine.cleanNodes();
     this.engine.beginUpdate(node);
     cellWidth = this.cellWidth();
@@ -426,17 +422,8 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
       if (node._lastTriedX === x && node._lastTriedY === y) return;
     } else if (event.type === 'resize')  {
       if (x < 0) return;
-      // Addin an extra row if the item it's at the bottom of the layout
-      if (node.y+node.h >= this.getRow()-1) {
-        this.opts.minRow = this.getRow() + 1;
-        this._updateContainerHeight();
-      }
-
       // Scrolling page if needed
       Utils.updateScrollResize(event as MouseEvent, el, cellHeight);
-      // Restore minRow
-      this.opts.minRow = minRow;
-
       w = Math.round(ui.size.width / cellWidth);
       h = Math.round(ui.size.height / cellHeight);
       if (w === node.w && h === node.h) return;

src/h5/dd-resizable.ts

@@ -42,6 +42,8 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
   /** @internal */
   private scrolled: number;
   /** @internal */
+  private scrollEl: HTMLElement;
+  /** @internal */
   private startEvent: MouseEvent;
   /** @internal value saved in the same order as _originStyleProp[] */
   private elOriginStyleVal: string[];
@@ -157,8 +159,8 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
   /** @internal */
   private _resizeStart(event: MouseEvent): DDResizable {
     this.originalRect = this.el.getBoundingClientRect();
-    const scrollEl = Utils.getScrollParent(this.el);
-    this.scrollY = scrollEl ? scrollEl.scrollTop : 0;
+    this.scrollEl = Utils.getScrollParent(this.el);
+    this.scrollY = this.scrollEl.scrollTop;
     this.startEvent = event;
     this._setupHelper();
     this._applyChange();
@@ -173,8 +175,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
 
   /** @internal */
   private _resizing(event: MouseEvent, dir: string): DDResizable {
-    const scrollEl = Utils.getScrollParent(this.el);
-    this.scrolled = scrollEl ? (scrollEl.scrollTop - this.scrollY) : this.scrollY;
+    this.scrolled = this.scrollEl.scrollTop - this.scrollY;
     this.temporalRect = this._getChange(event, dir);
     this._applyChange();
     const ev = DDUtils.initEvent<MouseEvent>(event, { type: 'resize', target: this.el });
@@ -303,7 +304,8 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
 
   /** @internal */
   private _ui = (): DDUIData => {
-    const containmentRect = this.el.parentElement.getBoundingClientRect();
+    const containmentEl = this.el.parentElement;
+    const containmentRect = containmentEl.getBoundingClientRect();
     const newRect = { // Note: originalRect is a complex object, not a simple Rect, so copy out.
       width: this.originalRect.width,
       height: this.originalRect.height + this.scrolled,

src/utils.ts

@@ -280,15 +280,15 @@ export class Utils {
 
   /** @internal */
   static getScrollParent(el: HTMLElement): HTMLElement {
-    let returnEl;
-    if (el === null) {
-      returnEl = null;
-    } else if (el.scrollHeight > el.clientHeight) {
-      returnEl = el;
+    if (el === null) return document.documentElement;
+    const style = getComputedStyle(el);
+    const overflowRegex = /(auto|scroll)/;
+
+    if (overflowRegex.test(style.overflow + style.overflowY)) {
+      return el;
     } else {
-      returnEl = this.getScrollParent(el.parentElement);
+      return this.getScrollParent(el.parentElement);
     }
-    return returnEl;
   }
 
   /** @internal */
@@ -338,10 +338,7 @@ export class Utils {
    * @param distance Distance to scroll
    */
   static updateScrollResize(event: MouseEvent, el: HTMLElement, distance: number): void {
-    let scrollEl = this.getScrollParent(el);
-    if (!scrollEl ) return;
-
-    //const width = scrollEl.clientWidth;
+    const scrollEl = this.getScrollParent(el);
     const height = scrollEl.clientHeight;
 
     const top = event.clientY < distance;