[@etecture/rex] Scrollbar: adds scrolling visibility with timeout and disables hover visibility on touch screens

Author: btmnk

core/src/components/Scrollbar/Scrollbar.module.css

@@ -46,10 +46,16 @@
       top: var(--rex-scrollbar-offset, 2px);
       bottom: var(--rex-scrollbar-offset, 2px);
       right: var(--rex-scrollbar-offset, 2px);
-      width: calc(var(--rex-scrollbar-width, 10px) - calc(var(--rex-scrollbar-padding, 1px) * 2));
+      width: calc(
+        var(--rex-scrollbar-width, 10px) -
+          calc(var(--rex-scrollbar-padding, 1px) * 2)
+      );
 
       & .scrollbarThumb {
-        width: calc(var(--rex-scrollbar-width, 10px) - calc(var(--rex-scrollbar-padding, 1px) * 2));
+        width: calc(
+          var(--rex-scrollbar-width, 10px) -
+            calc(var(--rex-scrollbar-padding, 1px) * 2)
+        );
         height: 50%;
         min-height: 40px;
       }
@@ -59,10 +65,16 @@
       left: var(--rex-scrollbar-offset, 2px);
       bottom: var(--rex-scrollbar-offset, 2px);
       right: var(--rex-scrollbar-offset, 2px);
-      height: calc(var(--rex-scrollbar-width, 10px) - calc(var(--rex-scrollbar-padding, 1px) * 2));
+      height: calc(
+        var(--rex-scrollbar-width, 10px) -
+          calc(var(--rex-scrollbar-padding, 1px) * 2)
+      );
 
       & .scrollbarThumb {
-        height: calc(var(--rex-scrollbar-width, 10px) - calc(var(--rex-scrollbar-padding, 1px) * 2));
+        height: calc(
+          var(--rex-scrollbar-width, 10px) -
+            calc(var(--rex-scrollbar-padding, 1px) * 2)
+        );
         width: 50%;
         min-width: 40px;
       }
@@ -88,33 +100,56 @@
         border-radius: 10px;
 
         &:active {
-          background: var(--rex-scrollbar-active-thumb-color, rgba(0, 0, 0, 0.95));
+          background: var(
+            --rex-scrollbar-active-thumb-color,
+            rgba(0, 0, 0, 0.95)
+          );
         }
       }
     }
 
     &.hasVerticalScroll > .horizontalTrack {
-      right: calc(var(--rex-scrollbar-offset, 2px) + calc(var(--rex-scrollbar-width, 10px) * 1.2));
+      right: calc(
+        var(--rex-scrollbar-offset, 2px) +
+          calc(var(--rex-scrollbar-width, 10px) * 1.2)
+      );
     }
 
     &.hasHorizontalScroll > .verticalTrack {
-      bottom: calc(var(--rex-scrollbar-offset, 2px) + calc(var(--rex-scrollbar-width, 10px) * 1.2));
+      bottom: calc(
+        var(--rex-scrollbar-offset, 2px) +
+          calc(var(--rex-scrollbar-width, 10px) * 1.2)
+      );
     }
 
-    &.hasVerticalScroll.visible,
-    &.hasVerticalScroll:hover {
+    &.hasVerticalScroll.visible {
       &:not(.trackHidden) > .verticalTrack {
         opacity: 1;
         visibility: visible;
       }
     }
 
-    &.hasHorizontalScroll.visible,
-    &.hasHorizontalScroll:hover {
+    &.hasHorizontalScroll.visible {
       &:not(.trackHidden) > .horizontalTrack {
         opacity: 1;
         visibility: visible;
       }
     }
+
+    @media (hover: hover) {
+      &.hasVerticalScroll:hover {
+        &:not(.trackHidden) > .verticalTrack {
+          opacity: 1;
+          visibility: visible;
+        }
+      }
+
+      &.hasHorizontalScroll:hover {
+        &:not(.trackHidden) > .horizontalTrack {
+          opacity: 1;
+          visibility: visible;
+        }
+      }
+    }
   }
 }

core/src/components/Scrollbar/Scrollbar.tsx

@@ -69,6 +69,12 @@ export interface ScrollbarProps
    */
   verticalScrollDisabled?: boolean;
 
+  /**
+   * The amount of time the scrollbar remains visible after scrolling
+   * @default 800
+   */
+  visibilityTimeout?: number;
+
   /**
    * An optional reference to the scroll container.
    * This is the element on which the scroll events happen.
@@ -102,6 +108,7 @@ export const Scrollbar: React.FC<ScrollbarProps> = (props) => {
     verticalScrollDisabled = false,
     horizontalScrollDisabled = false,
     style,
+    visibilityTimeout = 800,
     ...divProps
   } = props;
 
@@ -118,10 +125,11 @@ export const Scrollbar: React.FC<ScrollbarProps> = (props) => {
   const verticalScrollbarRef = useRef<HTMLDivElement | null>(null);
   const horizontalScrollbarRef = useRef<HTMLDivElement | null>(null);
 
-  useScrollHandler({
+  const { isScrolling } = useScrollHandler({
     horizontalScrollbarRef,
     verticalScrollbarRef,
     contentRef,
+    visibilityTimeout,
   });
 
   const { horizontalDragging, verticalDragging } = useDragHandler({
@@ -137,7 +145,7 @@ export const Scrollbar: React.FC<ScrollbarProps> = (props) => {
       visibility,
     });
 
-  const isTrackVisible = visibility === "always" || isDragging;
+  const isTrackVisible = visibility === "always" || isDragging || isScrolling;
   const isTrackHidden = visibility === "never";
 
   const containerClassNames = clsx(

core/src/components/Scrollbar/hooks/useScrollHandler.ts

@@ -1,21 +1,29 @@
-import { RefObject, useEffect } from "react";
+import { RefObject, useEffect, useRef, useState } from "react";
 
 export type UseScrollbarHandlerProps = {
   verticalScrollbarRef: RefObject<HTMLDivElement | null>;
   horizontalScrollbarRef: RefObject<HTMLDivElement | null>;
   contentRef: RefObject<HTMLDivElement>;
+  visibilityTimeout: number;
   onScroll?: () => void;
 };
 
 export const useScrollHandler = (props: UseScrollbarHandlerProps) => {
-  const { verticalScrollbarRef, horizontalScrollbarRef, contentRef, onScroll } = props;
+  const { verticalScrollbarRef, horizontalScrollbarRef, contentRef, visibilityTimeout, onScroll } =
+    props;
+
+  const [isScrolling, setIsScrolling] = useState(false);
+  const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
   useEffect(() => {
     const handleScroll = () => {
       const contentWidth = contentRef.current?.clientWidth ?? 0;
       const contentHeight = contentRef.current?.clientHeight ?? 0;
 
       onScroll?.();
+      setIsScrolling(true);
+      clearTimeout(scrollTimeoutRef.current);
+      scrollTimeoutRef.current = setTimeout(() => setIsScrolling(false), visibilityTimeout);
 
       if (contentRef.current && verticalScrollbarRef.current && horizontalScrollbarRef.current) {
         // VERTICAL
@@ -55,5 +63,7 @@ export const useScrollHandler = (props: UseScrollbarHandlerProps) => {
     return () => {
       contentRef.current?.removeEventListener("scroll", handleScroll);
     };
-  }, [contentRef, verticalScrollbarRef, horizontalScrollbarRef, onScroll]);
+  }, [contentRef, verticalScrollbarRef, horizontalScrollbarRef, visibilityTimeout, onScroll]);
+
+  return { isScrolling };
 };