Fix scrolling while dragging in file list view

Signed-off-by: Louis Chemineau <louis@chmn.me>

1 files changed, 19 insertions, 17 deletions

diff --git a/apps/files/js/files.js b/apps/files/js/files.js
index a14afcd4fce..0ae049360b4 100644
--- a/apps/files/js/files.js
+++ b/apps/files/js/files.js
@@ -449,7 +449,6 @@ var dragOptions={
 	revert: 'invalid',
 	revertDuration: 300,
 	opacity: 0.7,
-	appendTo: 'body',
 	cursorAt: { left: 24, top: 18 },
 	helper: createDragShadow,
 	cursor: 'move',
@@ -482,23 +481,26 @@ var dragOptions={
 		$('.crumbmenu').removeClass('canDropChildren');
 	},
 	drag: function(event, ui) {
-		var scrollingArea = FileList.$container;
-		var currentScrollTop = $(scrollingArea).scrollTop();
-		var scrollArea = Math.min(Math.floor($(window).innerHeight() / 2), 100);
-
-		var bottom = $(window).innerHeight() - scrollArea;
-		var top = $(window).scrollTop() + scrollArea;
-		if (event.pageY < top) {
-			$(scrollingArea).animate({
-				scrollTop: currentScrollTop - 10
-			}, 400);
-
-		} else if (event.pageY > bottom) {
-			$(scrollingArea).animate({
-				scrollTop: currentScrollTop + 10
-			}, 400);
-		}
+		/** @type {JQuery<HTMLDivElement>} */
+		const scrollingArea = FileList.$container;
+
+		// Get the top and bottom scroll trigger y positions
+		const containerHeight = scrollingArea.innerHeight() ?? 0
+		const scrollTriggerArea = Math.min(Math.floor(containerHeight / 2), 100);
+		const bottomTriggerY = containerHeight - scrollTriggerArea;
+		const topTriggerY = scrollTriggerArea;
+
+		// Get the cursor position relative to the container
+		const containerOffset = scrollingArea.offset() ?? {left: 0, top: 0}
+		const cursorPositionY = event.pageY - containerOffset.top
 
+		const currentScrollTop = scrollingArea.scrollTop() ?? 0
+
+		if (cursorPositionY < topTriggerY) {
+			scrollingArea.scrollTop(currentScrollTop - 10)
+		} else if (cursorPositionY > bottomTriggerY) {
+			scrollingArea.scrollTop(currentScrollTop + 10)
+		}
 	}
 };
 // sane browsers support using the distance option