[@mantine/core] ScrollArea: Fix scrollbar flickering on reveal with h…

…over and scroll types (#6218)
mantinedev · May 24, 2024 · 34643d5 · 34643d5
1 parent cf3c85f
commit 34643d5
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 3 deletions.
diff --git a/packages/@mantine/core/src/components/ScrollArea/ScrollArea.story.tsx b/packages/@mantine/core/src/components/ScrollArea/ScrollArea.story.tsx
@@ -16,7 +16,7 @@ const content = Array(10)
 export function Usage() {
   return (
     <div style={{ background: 'pink', maxWidth: 300 }}>
-      <ScrollArea h={200} type="always" offsetScrollbars scrollbars="y" bg="red" pb={0}>
+      <ScrollArea h={200} scrollbars="y">
         <div style={{ width: 600 }}>{content}</div>
       </ScrollArea>
     </div>

diff --git a/...s/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarAuto.tsx b/...s/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarAuto.tsx
@@ -17,6 +17,7 @@ export const ScrollAreaScrollbarAuto = forwardRef<HTMLDivElement, ScrollAreaScro
     const { forceMount, ...scrollbarProps } = props;
     const [visible, setVisible] = useState(false);
     const isHorizontal = props.orientation === 'horizontal';
+
     const handleResize = useDebouncedCallback(() => {
       if (context.viewport) {
         const isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;

diff --git a/.../@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarHover.tsx b/.../@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarHover.tsx
@@ -25,6 +25,7 @@ export const ScrollAreaScrollbarHover = forwardRef<HTMLDivElement, ScrollAreaScr
         };
         scrollArea.addEventListener('pointerenter', handlePointerEnter);
         scrollArea.addEventListener('pointerleave', handlePointerLeave);
+
         return () => {
           window.clearTimeout(hideTimer);
           scrollArea.removeEventListener('pointerenter', handlePointerEnter);

diff --git a/...mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarVisible.tsx b/...mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarVisible.tsx
@@ -29,6 +29,7 @@ export const ScrollAreaScrollbarVisible = forwardRef<
     viewport: 0,
     scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 },
   });
+
   const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);
 
   const commonProps: Omit<
@@ -86,6 +87,11 @@ export const ScrollAreaScrollbarVisible = forwardRef<
           if (context.viewport && thumbRef.current) {
             const scrollPos = context.viewport.scrollTop;
             const offset = getThumbOffsetFromScroll(scrollPos, sizes);
+            if (sizes.scrollbar.size === 0) {
+              thumbRef.current.style.opacity = '0';
+            } else {
+              thumbRef.current.style.opacity = '1';
+            }
             thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;
           }
         }}

diff --git a/packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollbarY.tsx b/packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollbarY.tsx
@@ -14,8 +14,10 @@ export const ScrollAreaScrollbarY = forwardRef<HTMLDivElement, ScrollAreaScrollb
     const composeRefs = useMergedRef(forwardedRef, ref, context.onScrollbarYChange);
 
     useEffect(() => {
-      if (ref.current) setComputedStyle(getComputedStyle(ref.current));
-    }, [ref]);
+      if (ref.current) {
+        setComputedStyle(window.getComputedStyle(ref.current));
+      }
+    }, []);
 
     return (
       <Scrollbar