50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T3f1e,'use client'; import * as React from 'react'; import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'; import { motion, AnimatePresence, useMotionValue, useTransform, } from 'motion/react'; import { cn } from '@/lib/utils'; interface ScrollAreaProProps extends React.ComponentProps< typeof ScrollAreaPrimitive.Root > { className?: string; children: React.ReactNode; crossDirectionalScroll?: boolean; autoHide?: boolean; showProgress?: 'horizontal' | 'vertical'; onScrollChange?: (progress: { x: number; y: number }) => void; } interface ScrollBarProProps extends React.ComponentProps< typeof ScrollAreaPrimitive.ScrollAreaScrollbar > { className?: string; show?: boolean; autoHide?: boolean; isScrolling?: boolean; orientation?: 'vertical' | 'horizontal'; } const isMobileDevice = (): boolean => { if (typeof window !== 'undefined') { if (window.innerWidth <= 1024) return true; const hasTouchScreen = 'ontouchstart' in window || navigator.maxTouchPoints > 0; const mobileUserAgent = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|Tablet/i.test( navigator.userAgent, ); if (hasTouchScreen && mobileUserAgent) return true; if (window.innerWidth <= 1366 && hasTouchScreen) return true; } return false; }; function ScrollBarPro({ className, orientation = 'vertical', show = true, autoHide = false, isScrolling = false, ...props }: ScrollBarProProps) { if (!autoHide && !isScrolling) { return ( ); } return ( {(!autoHide || show) && ( )} ); } function ScrollAreaPro({ className, children, crossDirectionalScroll = false, autoHide = false, showProgress, onScrollChange, ...props }: ScrollAreaProProps) { const [isScrolling, setIsScrolling] = React.useState(false); const [showScrollbars, setShowScrollbars] = React.useState(!autoHide); const [isFullyVisible, setIsFullyVisible] = React.useState(true); const [isMobile, setIsMobile] = React.useState(false); const [containerHeight, setContainerHeight] = React.useState(0); const [isScrollingY, setIsScrollingY] = React.useState(false); const scrollTimeoutVerticalRef = React.useRef(null); const viewportRef = React.useRef(null); const containerRef = React.useRef(null); const scrollTimeoutRef = React.useRef(null); const scrollX = useMotionValue(0); const scrollY = useMotionValue(0); const progressBarScaleX = useTransform(scrollX, [0, 100], [0, 1]); const progressBarScaleY = useTransform(scrollY, [0, 100], [0, 1]); const verticalScrollProgress = useMotionValue(0); const progressHeight = containerHeight - 20; const y1 = useTransform( verticalScrollProgress, [0, 0.8], [50, progressHeight], ); const y2 = useTransform( verticalScrollProgress, [0, 1], [50, Math.max(50, progressHeight - 200)], ); React.useEffect(() => { const checkMobile = () => { setIsMobile(isMobileDevice()); }; checkMobile(); const updateContainerHeight = () => { if (containerRef.current) { setContainerHeight(containerRef.current.offsetHeight); } }; updateContainerHeight(); window.addEventListener('resize', checkMobile); window.addEventListener('orientationchange', checkMobile); window.addEventListener('resize', updateContainerHeight); return () => { window.removeEventListener('resize', checkMobile); window.removeEventListener('orientationchange', checkMobile); window.removeEventListener('resize', updateContainerHeight); }; }, []); const handleScroll = React.useCallback((): void => { if (!viewportRef.current) return; const element = viewportRef.current; const maxScrollX = element.scrollWidth - element.clientWidth; const maxScrollY = element.scrollHeight - element.clientHeight; const progressX = maxScrollX > 0 ? (element.scrollLeft / maxScrollX) * 100 : 0; const progressY = maxScrollY > 0 ? (element.scrollTop / maxScrollY) * 100 : 0; scrollX.set(progressX); scrollY.set(progressY); verticalScrollProgress.set(progressY / 100); onScrollChange?.({ x: progressX, y: progressY }); if (autoHide) { setIsScrolling(true); setShowScrollbars(true); if (scrollTimeoutRef.current) { clearTimeout(scrollTimeoutRef.current); } if (scrollTimeoutVerticalRef.current) { clearTimeout(scrollTimeoutVerticalRef.current); } scrollTimeoutRef.current = setTimeout(() => { setIsScrolling(false); setShowScrollbars(false); }, 1500); } if (showProgress === 'vertical') { setIsScrollingY(true); if (scrollTimeoutVerticalRef.current) { clearTimeout(scrollTimeoutVerticalRef.current); } scrollTimeoutVerticalRef.current = setTimeout(() => { setIsScrollingY(false); }, 2000); } }, [ autoHide, onScrollChange, scrollX, scrollY, showProgress, verticalScrollProgress, ]); const handleWheel = React.useCallback( (e: WheelEvent): void => { if ( !crossDirectionalScroll || !viewportRef.current || !isFullyVisible || isMobile ) return; if (Math.abs(e.deltaY) > 0) { e.preventDefault(); viewportRef.current.scrollBy({ left: e.deltaY, behavior: 'auto', }); } }, [crossDirectionalScroll, isFullyVisible, isMobile], ); const handleTouchStart = React.useCallback( (e: TouchEvent): void => { if ( !crossDirectionalScroll || !viewportRef.current || !isFullyVisible || isMobile ) return; const touch = e.touches[0]; viewportRef.current.dataset.touchStartY = touch.clientY.toString(); }, [crossDirectionalScroll, isFullyVisible, isMobile], ); const handleTouchMove = React.useCallback( (e: TouchEvent): void => { if ( !crossDirectionalScroll || !viewportRef.current || !isFullyVisible || isMobile ) return; const element = viewportRef.current; const startY = parseFloat(element.dataset.touchStartY || '0'); const touch = e.touches[0]; const deltaY = touch.clientY - startY; if (Math.abs(deltaY) > 10) { e.preventDefault(); const currentScrollLeft = element.scrollLeft; const maxScrollLeft = element.scrollWidth - element.clientWidth; const scrollAmount = -deltaY * 2; const newScrollLeft = Math.max( 0, Math.min(maxScrollLeft, currentScrollLeft + scrollAmount), ); element.scrollTo({ left: newScrollLeft, behavior: 'auto' }); element.dataset.touchStartY = touch.clientY.toString(); } }, [crossDirectionalScroll, isFullyVisible, isMobile], ); React.useEffect(() => { const element = viewportRef.current; if (!element) return; element.addEventListener('scroll', handleScroll, { passive: true }); if (crossDirectionalScroll && isFullyVisible && !isMobile) { element.addEventListener('wheel', handleWheel, { passive: false }); element.addEventListener('touchstart', handleTouchStart, { passive: false, }); element.addEventListener('touchmove', handleTouchMove, { passive: false, }); } return () => { element.removeEventListener('scroll', handleScroll); if (crossDirectionalScroll && !isMobile) { element.removeEventListener('wheel', handleWheel); element.removeEventListener('touchstart', handleTouchStart); element.removeEventListener('touchmove', handleTouchMove); } if (scrollTimeoutRef.current) { clearTimeout(scrollTimeoutRef.current); } }; }, [ handleScroll, handleWheel, handleTouchStart, handleTouchMove, crossDirectionalScroll, isFullyVisible, isMobile, ]); React.useEffect(() => { if (!crossDirectionalScroll || isMobile) return; const container = containerRef.current; if (!container) return; const observer = new IntersectionObserver( ([entry]) => setIsFullyVisible(entry.intersectionRatio >= 0.9), { threshold: 0.9 }, ); observer.observe(container); return () => observer.disconnect(); }, [crossDirectionalScroll, isMobile]); React.useEffect(() => { const resizeObserver = new ResizeObserver(() => { if (containerRef.current) { setContainerHeight(containerRef.current.offsetHeight); } }); if (containerRef.current) { resizeObserver.observe(containerRef.current); } return () => { resizeObserver.disconnect(); }; }, []); return ( {children} {(!crossDirectionalScroll || isMobile) && ( )} {showProgress === 'vertical' && isScrollingY && containerHeight > 0 && ( 0 ? 'none' : 'rgba(0, 0, 0, 0.24) 0px 3px 8px', }} transition={{ duration: 0.2, delay: 0.5 }} className='border-neutral-200 flex h-4 w-4 items-center justify-center rounded-full border shadow-xs' > 0 ? 'white' : '#10b981', borderColor: verticalScrollProgress.get() > 0 ? 'white' : '#059669', }} transition={{ duration: 0.2, delay: 0.5 }} className='h-2 w-2 rounded-full border border-neutral-300 bg-white' /> )} {showProgress === 'horizontal' && ( )} ); } export { ScrollAreaPro, ScrollBarPro }; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","@radix-ui/react-scroll-area",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-scroll-area","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@radix-ui/react-scroll-area"}]]}]}],["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}],["$","li","clsx",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://www.scrollxui.dev/registry/scroll-areapro.json","proxyUrl":"https://shadcnregistry.com/r/scrollxui/scroll-areapro","itemId":"@scrollxui/scroll-areapro"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"components/ui/scroll-areapro.tsx","content":"$53","type":"registry:ui"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}","type":"registry:lib"}]}]]}],"$L54"]}]

ScrollArea Pro

Installation

Files

components

lib

Styles