fix resize-scroll when gridster is not at top of page (#1727)

Manfred-on-github · web-flow · commit 6dcbac20da0e · 2021-04-13T07:32:30.000-07:00
* fix resize-scroll when gridster is not at top of page
diff --git a/spec/e2e/html/1727_resize_scroll_top.html b/spec/e2e/html/1727_resize_scroll_top.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="../../../demo/demo.css"/>
+  <!-- <script src="https://cdn.jsdelivr.net/npm/gridstack@3.3.0/dist/gridstack-h5.js"></script> -->
+  <script src="../../../dist/gridstack-h5.js"></script>
+  <style>
+    .topHeader {
+      background: rgb(127, 87, 180);
+      height: 200px;
+    }
+    .willScroll {
+      height: 600px;
+      overflow-y: auto;
+      flex-grow: 1;
+    }
+    .row {
+        display:flex;
+        width: 100%;
+    }
+    .showDistance {
+        border-top-width: 130px;
+        border-bottom-width: 130px;
+        border-color: gray;
+        border-style: solid;
+        height: 600px;
+        width: 50px;
+        box-sizing: border-box;
+    }
+  </style>
+
+</head>
+<body>
+  <div class="topHeader">This is the header which brings an offset of 200 px</div>
+  <div class="row">
+    <div class="showDistance"></div>
+    <div class="willScroll">
+        <div class="grid-stack"></div>
+      </div>    
+  </div>
+
+  <script type="text/javascript">
+    let grid = GridStack.init({cellHeight: 130});
+    let items = [
+        {x: 0, y: 0, w: 2, h: 2, content: "resize-me - check scrolling starts only when in height of gray area, and you can scroll back up as well."},
+        {x: 3, y: 0, w: 2, h: 2, content: "this is here to have next item positioned way down"},
+        {x: 3, y: 2, w: 3, h: 2, content: "resize me - scroll will start immediately, but should not be extremely fast"},
+        {x: 6, y: 0, w: 2, h: 8, content: "this is here to have a scroll bar from the beginning"},
+        ];
+    grid.load(items);
+  </script>
+</body>
+</html>
diff --git a/src/utils.ts b/src/utils.ts
@@ -351,16 +351,17 @@ export class Utils {
   static updateScrollResize(event: MouseEvent, el: HTMLElement, distance: number): void {
     const scrollEl = this.getScrollParent(el);
     const height = scrollEl.clientHeight;
-
-    const top = event.clientY < distance;
-    const bottom = event.clientY > height - distance;
+    const offsetTop = scrollEl.getBoundingClientRect().top;
+    const pointerPosY = event.clientY - offsetTop;
+    const top = pointerPosY < distance;
+    const bottom = pointerPosY > height - distance;
 
     if (top) {
       // This also can be done with a timeout to keep scrolling while the mouse is
       // in the scrolling zone. (will have smoother behavior)
-      scrollEl.scrollBy({ behavior: 'smooth', top: event.clientY - distance});
+      scrollEl.scrollBy({ behavior: 'smooth', top: pointerPosY - distance});
     } else if (bottom) {
-      scrollEl.scrollBy({ behavior: 'smooth', top: distance - (height - event.clientY)});
+      scrollEl.scrollBy({ behavior: 'smooth', top: distance - (height - pointerPosY)});
     }
   }
 }
