@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 3.43 kB
Source Map (JSON)
{"version":3,"file":"useScrollOverflow.mjs","names":[],"sources":["../../src/ScrollShadow/useScrollOverflow.ts"],"sourcesContent":["import { RefObject, useEffect, useState } from 'react';\n\ninterface UseScrollOverflowProps {\n domRef: RefObject<HTMLElement | null>;\n isEnabled?: boolean;\n offset?: number;\n onVisibilityChange?: (visibility: {\n bottom?: boolean;\n left?: boolean;\n right?: boolean;\n top?: boolean;\n }) => void;\n orientation?: 'vertical' | 'horizontal';\n updateDeps?: any[];\n}\n\nexport const useScrollOverflow = ({\n domRef,\n offset = 0,\n orientation = 'vertical',\n isEnabled = true,\n onVisibilityChange,\n updateDeps = [],\n}: UseScrollOverflowProps) => {\n const [scrollState, setScrollState] = useState({\n bottom: false,\n left: false,\n right: false,\n top: false,\n });\n\n useEffect(() => {\n const element = domRef.current;\n if (!element || !isEnabled) return;\n\n const checkScroll = () => {\n const newState = { ...scrollState };\n\n if (orientation === 'vertical') {\n const hasVerticalScroll = element.scrollHeight > element.clientHeight;\n\n if (hasVerticalScroll) {\n newState.top = element.scrollTop > offset;\n newState.bottom =\n element.scrollTop + element.clientHeight < element.scrollHeight - offset;\n } else {\n newState.top = false;\n newState.bottom = false;\n }\n } else {\n const hasHorizontalScroll = element.scrollWidth > element.clientWidth;\n\n if (hasHorizontalScroll) {\n newState.left = element.scrollLeft > offset;\n newState.right = element.scrollLeft + element.clientWidth < element.scrollWidth - offset;\n } else {\n newState.left = false;\n newState.right = false;\n }\n }\n\n setScrollState(newState);\n onVisibilityChange?.(newState);\n };\n\n // 初始检查\n checkScroll();\n\n // 监听滚动事件\n element.addEventListener('scroll', checkScroll);\n window.addEventListener('resize', checkScroll);\n\n // 观察内容变化\n const resizeObserver = new ResizeObserver(checkScroll);\n resizeObserver.observe(element);\n\n return () => {\n element.removeEventListener('scroll', checkScroll);\n window.removeEventListener('resize', checkScroll);\n resizeObserver.disconnect();\n };\n }, [domRef, offset, orientation, isEnabled, onVisibilityChange, ...updateDeps]);\n\n return scrollState;\n};\n"],"mappings":";;;AAgBA,MAAa,qBAAqB,EAChC,QACA,SAAS,GACT,cAAc,YACd,YAAY,MACZ,oBACA,aAAa,EAAE,OACa;CAC5B,MAAM,CAAC,aAAa,kBAAkB,SAAS;EAC7C,QAAQ;EACR,MAAM;EACN,OAAO;EACP,KAAK;EACN,CAAC;AAEF,iBAAgB;EACd,MAAM,UAAU,OAAO;AACvB,MAAI,CAAC,WAAW,CAAC,UAAW;EAE5B,MAAM,oBAAoB;GACxB,MAAM,WAAW,EAAE,GAAG,aAAa;AAEnC,OAAI,gBAAgB,WAGlB,KAF0B,QAAQ,eAAe,QAAQ,cAElC;AACrB,aAAS,MAAM,QAAQ,YAAY;AACnC,aAAS,SACP,QAAQ,YAAY,QAAQ,eAAe,QAAQ,eAAe;UAC/D;AACL,aAAS,MAAM;AACf,aAAS,SAAS;;YAGQ,QAAQ,cAAc,QAAQ,aAEjC;AACvB,aAAS,OAAO,QAAQ,aAAa;AACrC,aAAS,QAAQ,QAAQ,aAAa,QAAQ,cAAc,QAAQ,cAAc;UAC7E;AACL,aAAS,OAAO;AAChB,aAAS,QAAQ;;AAIrB,kBAAe,SAAS;AACxB,wBAAqB,SAAS;;AAIhC,eAAa;AAGb,UAAQ,iBAAiB,UAAU,YAAY;AAC/C,SAAO,iBAAiB,UAAU,YAAY;EAG9C,MAAM,iBAAiB,IAAI,eAAe,YAAY;AACtD,iBAAe,QAAQ,QAAQ;AAE/B,eAAa;AACX,WAAQ,oBAAoB,UAAU,YAAY;AAClD,UAAO,oBAAoB,UAAU,YAAY;AACjD,kBAAe,YAAY;;IAE5B;EAAC;EAAQ;EAAQ;EAAa;EAAW;EAAoB,GAAG;EAAW,CAAC;AAE/E,QAAO"}