diff --git a/packages/mui-base/src/ScrollArea/Root/ScrollAreaRoot.tsx b/packages/mui-base/src/ScrollArea/Root/ScrollAreaRoot.tsx index 10299a108a..65dd23c9d7 100644 --- a/packages/mui-base/src/ScrollArea/Root/ScrollAreaRoot.tsx +++ b/packages/mui-base/src/ScrollArea/Root/ScrollAreaRoot.tsx @@ -135,6 +135,7 @@ const ScrollAreaRoot = React.forwardRef(function ScrollAreaRoot( className, ownerState, extraProps: mergeReactProps(otherProps, { + dir, onMouseEnter() { setHovering(true); }, diff --git a/packages/mui-base/src/ScrollArea/Scrollbar/ScrollAreaScrollbar.tsx b/packages/mui-base/src/ScrollArea/Scrollbar/ScrollAreaScrollbar.tsx index 27b8a05ad1..6f7ee0be08 100644 --- a/packages/mui-base/src/ScrollArea/Scrollbar/ScrollAreaScrollbar.tsx +++ b/packages/mui-base/src/ScrollArea/Scrollbar/ScrollAreaScrollbar.tsx @@ -130,7 +130,6 @@ const ScrollAreaScrollbar = React.forwardRef(function ScrollAreaScrollbar( viewportRef.current.scrollTop = newScrollTop; } - // Handle X-axis (horizontal) scroll if (thumbXRef.current && scrollbarXRef.current && orientation === 'horizontal') { const thumbWidth = thumbXRef.current.offsetWidth; const trackRectX = scrollbarXRef.current.getBoundingClientRect(); @@ -141,7 +140,19 @@ const ScrollAreaScrollbar = React.forwardRef(function ScrollAreaScrollbar( const maxThumbOffsetX = scrollbarXRef.current.offsetWidth - thumbWidth; const scrollRatioX = clickX / maxThumbOffsetX; - const newScrollLeft = scrollRatioX * (scrollableContentWidth - viewportWidth); + + let newScrollLeft: number; + if (dir === 'rtl') { + // In RTL, we need to invert the scroll direction + newScrollLeft = (1 - scrollRatioX) * (scrollableContentWidth - viewportWidth); + + // Adjust for browsers that use negative scrollLeft in RTL + if (viewportRef.current.scrollLeft <= 0) { + newScrollLeft = -newScrollLeft; + } + } else { + newScrollLeft = scrollRatioX * (scrollableContentWidth - viewportWidth); + } viewportRef.current.scrollLeft = newScrollLeft; }