scroll-fade-effect

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface ScrollFadeEffectProps
8  extends React.ComponentPropsWithoutRef<"div"> {
9  /**
10   * The orientation of the scroll container.
11   * @default "vertical"
12   */
13  orientation?: "horizontal" | "vertical"
14  /**
15   * Controls the fade size in pixels.
16   * Higher values create a more prominent fade effect.
17   * @default 64
18   */
19  intensity?: number
20}
21 
22export function ScrollFadeEffect({
23  className,
24  orientation = "vertical",
25  intensity = 64,
26  style,
27  children,
28  ...props
29}: ScrollFadeEffectProps) {
30  const ref = React.useRef<HTMLDivElement>(null)
31  const [isScrollable, setIsScrollable] = React.useState(false)
32 
33  React.useEffect(() => {
34    const element = ref.current
35    if (!element) return
36 
37    const checkScrollable = () => {
38      if (orientation === "vertical") {
39        setIsScrollable(element.scrollHeight > element.clientHeight)
40      } else {
41        setIsScrollable(element.scrollWidth > element.clientWidth)
42      }
43    }
44 
45    checkScrollable()
46 
47    const resizeObserver = new ResizeObserver(checkScrollable)
48    resizeObserver.observe(element)
49 
50    // Also observe content changes
51    const mutationObserver = new MutationObserver(checkScrollable)
52    mutationObserver.observe(element, { childList: true, subtree: true })
53 
54    return () => {
55      resizeObserver.disconnect()
56      mutationObserver.disconnect()
57    }
58  }, [orientation])
59 
60  const fadeSize = `${Math.max(intensity, 0)}px`
61 
62  return (
63    <div
64      ref={ref}
65      data-orientation={orientation}
66      data-scrollable={isScrollable}
67      className={cn(
68        "data-[orientation=horizontal]:overflow-x-auto data-[orientation=vertical]:overflow-y-auto",
69        "data-[scrollable=true]:data-[orientation=horizontal]:scroll-fade-effect-x data-[scrollable=true]:data-[orientation=vertical]:scroll-fade-effect-y",
70        className
71      )}
72      style={
73        {
74          "--mask-height": fadeSize,
75          "--mask-width": fadeSize,
76          "--bottom-mask-height": fadeSize,
77          "--right-mask-width": fadeSize,
78          ...style,
79        } as React.CSSProperties
80      }
81      {...props}
82    >
83      {children}
84    </div>
85  )
86}