diff --git a/packages/mui-base/src/ScrollArea/Scrollbar/useScrollAreaScrollbar.ts b/packages/mui-base/src/ScrollArea/Scrollbar/useScrollAreaScrollbar.ts index f0bc831b8..3a4b2cbda 100644 --- a/packages/mui-base/src/ScrollArea/Scrollbar/useScrollAreaScrollbar.ts +++ b/packages/mui-base/src/ScrollArea/Scrollbar/useScrollAreaScrollbar.ts @@ -1,7 +1,6 @@ import * as React from 'react'; import { useScrollAreaRootContext } from '../Root/ScrollAreaRootContext'; import { mergeReactProps } from '../../utils/mergeReactProps'; -import { useEnhancedEffect } from '../../utils/useEnhancedEffect'; export function useScrollAreaScrollbar(params: useScrollAreaScrollbar.Parameters) { const { orientation } = params; @@ -19,8 +18,6 @@ export function useScrollAreaScrollbar(params: useScrollAreaScrollbar.Parameters type, } = useScrollAreaRootContext(); - const [overscrollStyles, setOverscrollStyles] = React.useState({}); - React.useEffect(() => { const viewportEl = viewportRef.current; const scrollbarEl = orientation === 'vertical' ? scrollbarYRef.current : scrollbarXRef.current; @@ -30,6 +27,8 @@ export function useScrollAreaScrollbar(params: useScrollAreaScrollbar.Parameters return; } + event.preventDefault(); + if (orientation === 'vertical') { if (viewportEl.scrollTop === 0 && event.deltaY < 0) { return; @@ -52,8 +51,6 @@ export function useScrollAreaScrollbar(params: useScrollAreaScrollbar.Parameters return; } - event.preventDefault(); - if (orientation === 'vertical') { viewportEl.scrollTop += event.deltaY; } else { @@ -68,21 +65,6 @@ export function useScrollAreaScrollbar(params: useScrollAreaScrollbar.Parameters }; }, [orientation, scrollbarXRef, scrollbarYRef, thumbYRef, viewportRef]); - useEnhancedEffect(() => { - if (!viewportRef.current) { - return; - } - - const computedStyle = getComputedStyle(viewportRef.current); - - setOverscrollStyles({ - ['overscrollBehaviorX' as string]: computedStyle.overscrollBehaviorX, - ['overscrollBehaviorY' as string]: computedStyle.overscrollBehaviorY, - ['overscrollBehaviorBlock' as string]: computedStyle.overscrollBehaviorBlock, - ['overscrollBehaviorInline' as string]: computedStyle.overscrollBehaviorInline, - }); - }, [viewportRef]); - const getScrollbarProps = React.useCallback( (externalProps = {}) => mergeReactProps<'div'>(externalProps, { @@ -145,8 +127,6 @@ export function useScrollAreaScrollbar(params: useScrollAreaScrollbar.Parameters onPointerUp: handlePointerUp, style: { position: 'absolute', - overflow: 'scroll', - ...overscrollStyles, ...(type === 'inlay' && { touchAction: 'none' }), ...(orientation === 'vertical' && { top: 0, @@ -163,7 +143,6 @@ export function useScrollAreaScrollbar(params: useScrollAreaScrollbar.Parameters [ rootId, handlePointerUp, - overscrollStyles, type, orientation, dir,