From 09cc4c544f3f1f7815ded212b9761a9c0c116eda Mon Sep 17 00:00:00 2001 From: atomiks Date: Tue, 22 Oct 2024 20:10:46 +1100 Subject: [PATCH] Take into account rubber band in Safari --- .../src/ScrollArea/Viewport/useScrollAreaViewport.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/mui-base/src/ScrollArea/Viewport/useScrollAreaViewport.tsx b/packages/mui-base/src/ScrollArea/Viewport/useScrollAreaViewport.tsx index 54502f3c1..3a6c6c0b3 100644 --- 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)`; }