Take into account rubber band in Safari

mui · Oct 22, 2024 · 09cc4c5 · 09cc4c5
1 parent 21c51cf
commit 09cc4c5
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/packages/mui-base/src/ScrollArea/Viewport/useScrollAreaViewport.tsx b/packages/mui-base/src/ScrollArea/Viewport/useScrollAreaViewport.tsx
@@ -65,7 +65,10 @@ export function useScrollAreaViewport(params: useScrollAreaViewport.Parameters)
         const maxThumbOffsetY =
           scrollbarYEl.offsetHeight - thumbHeight - (paddingTop + paddingBottom);
         const scrollRatioY = scrollTop / (scrollableContentHeight - viewportHeight);
-        const thumbOffsetY = scrollRatioY * maxThumbOffsetY;
+
+        // In Safari, don't allow it to go negative or too far as `scrollTop` considers the rubber
+        // band effect.
+        const thumbOffsetY = Math.min(maxThumbOffsetY, Math.max(0, scrollRatioY * maxThumbOffsetY));
 
         thumbYEl.style.transform = `translate3d(0,${thumbOffsetY}px,0)`;
       }
@@ -97,7 +100,10 @@ export function useScrollAreaViewport(params: useScrollAreaViewport.Parameters)
         const maxThumbOffsetX =
           scrollbarXEl.offsetWidth - thumbWidth - (paddingLeft + paddingRight);
         const scrollRatioX = scrollLeft / (scrollableContentWidth - viewportWidth);
-        const thumbOffsetX = scrollRatioX * maxThumbOffsetX;
+
+        // In Safari, don't allow it to go negative or too far as `scrollLeft` considers the rubber
+        // band effect.
+        const thumbOffsetX = Math.min(maxThumbOffsetX, Math.max(0, scrollRatioX * maxThumbOffsetX));
 
         thumbXEl.style.transform = `translate3d(${thumbOffsetX}px,0,0)`;
       }