Ensure the scroll works through longer ranges

jupyterlab · Oct 28, 2023 · 8cc5b45 · 8cc5b45
1 parent 4c038d3
commit 8cc5b45
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 27 deletions.
diff --git a/packages/dragdrop/src/index.ts b/packages/dragdrop/src/index.ts
@@ -1315,38 +1315,25 @@ namespace Private {
       return;
     }
     // Apply the scroll delta to the correct target.
-    scrollTarget.scrollTop +=
-      cursorBackdrop.scrollTop - backdropScroll.scrollTop;
-    scrollTarget.scrollLeft +=
-      cursorBackdrop.scrollLeft - backdropScroll.scrollLeft;
+    scrollTarget.scrollTop += cursorBackdrop.scrollTop - backdropScrollOrigin;
+    scrollTarget.scrollLeft += cursorBackdrop.scrollLeft - backdropScrollOrigin;
 
-    // Update previous position for future delta calculation.
-    backdropScroll.scrollTop = cursorBackdrop.scrollTop;
-    backdropScroll.scrollLeft = cursorBackdrop.scrollLeft;
-
-    // Center the scroll position if needed.
+    // Center the scroll position.
     resetBackdropScroll();
   }
 
   /**
-   * If needed, reset the backdrop scroll to allow further scrolling.
+   * Reset the backdrop scroll to allow further scrolling.
    */
   function resetBackdropScroll() {
-    if (cursorBackdrop.scrollTop <= 0 || cursorBackdrop.scrollTop >= 1000) {
-      cursorBackdrop.scrollTop = backdropScroll.scrollTop = 500;
-    }
-    if (cursorBackdrop.scrollLeft <= 0 || cursorBackdrop.scrollLeft >= 1000) {
-      cursorBackdrop.scrollLeft = backdropScroll.scrollLeft = 500;
-    }
+    cursorBackdrop.scrollTop = backdropScrollOrigin;
+    cursorBackdrop.scrollLeft = backdropScrollOrigin;
   }
 
   /**
-   * Previous backdrop scroll position.
+   * The center of the backdrop node scroll area.
    */
-  let backdropScroll = {
-    scrollTop: 0,
-    scrollLeft: 0
-  };
+  const backdropScrollOrigin = 500;
 
   /**
    * Create cursor backdrop node.

diff --git a/packages/dragdrop/style/index.css b/packages/dragdrop/style/index.css
@@ -29,8 +29,8 @@
 
 .lm-cursor-backdrop::after {
   content: '';
-  height: 1000px;
-  width: 1000px;
+  height: 1200px;
+  width: 1200px;
   display: block;
 }
 

diff --git a/packages/dragdrop/tests/src/index.spec.ts b/packages/dragdrop/tests/src/index.spec.ts
@@ -629,13 +629,17 @@ describe('@lumino/dragdrop', () => {
         wrapper.style.overflow = 'scroll';
         wrapper.style.height = '100px';
         wrapper.style.width = '100px';
-        content.style.height = '200px';
-        content.style.width = '200px';
+        content.style.height = '2000px';
+        content.style.width = '2000px';
 
-        backdrop.scrollTop += 10;
+        backdrop.scrollTop += 400;
         backdrop.dispatchEvent(new Event('scroll'));
+        expect(wrapper.scrollTop).to.equal(400);
+
+        backdrop.scrollTop += 400;
+        backdrop.dispatchEvent(new Event('scroll'));
+        expect(wrapper.scrollTop).to.equal(800);
 
-        expect(wrapper.scrollTop).to.equal(10);
         override.dispose();
         document.body.removeChild(wrapper);
       });