diff --git a/web/src/hooks/use-handle-dragging.ts b/web/src/hooks/use-handle-dragging.ts
index 57a789f12..794b65093 100644
--- a/web/src/hooks/use-handle-dragging.ts
+++ b/web/src/hooks/use-handle-dragging.ts
@@ -1,4 +1,5 @@
 import { useCallback, useEffect } from "react";
+import scrollIntoView from "scroll-into-view-if-needed";
 import { isMobile } from "react-device-detect";
 
 type DragHandlerProps = {
@@ -80,6 +81,10 @@ function useDraggableHandler({
               minute: "2-digit",
               ...(segmentDuration < 60 && { second: "2-digit" }),
             });
+            scrollIntoView(thumb, {
+              behavior: "smooth",
+              block: "center",
+            });
           }
         });
         if (setHandlebarTime) {
@@ -181,11 +186,6 @@ function useDraggableHandler({
         scrolled;
 
       updateHandlebarPosition(newHandlePosition - segmentHeight, handlebarTime);
-
-      scrollTimeRef.current.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-      });
     }
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps