mirror of
https://github.com/langgenius/dify.git
synced 2026-07-21 18:58:35 +08:00
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import { useThrottleFn } from 'ahooks'
|
|
import * as React from 'react'
|
|
|
|
export enum ScrollPosition {
|
|
belowTheWrap = 'belowTheWrap',
|
|
showing = 'showing',
|
|
aboveTheWrap = 'aboveTheWrap',
|
|
}
|
|
|
|
type Params = {
|
|
wrapElemRef: React.RefObject<HTMLElement | null>
|
|
nextToStickyELemRef: React.RefObject<HTMLElement | null>
|
|
}
|
|
const useStickyScroll = ({ wrapElemRef, nextToStickyELemRef }: Params) => {
|
|
const [scrollPosition, setScrollPosition] = React.useState<ScrollPosition>(
|
|
ScrollPosition.belowTheWrap,
|
|
)
|
|
const { run: handleScroll } = useThrottleFn(
|
|
() => {
|
|
const wrapDom = wrapElemRef.current
|
|
const stickyDOM = nextToStickyELemRef.current
|
|
if (!wrapDom || !stickyDOM) return
|
|
const { height: wrapHeight, top: wrapTop } = wrapDom.getBoundingClientRect()
|
|
const { top: nextToStickyTop } = stickyDOM.getBoundingClientRect()
|
|
let scrollPositionNew: ScrollPosition
|
|
|
|
if (nextToStickyTop - wrapTop >= wrapHeight) scrollPositionNew = ScrollPosition.belowTheWrap
|
|
else if (nextToStickyTop <= wrapTop) scrollPositionNew = ScrollPosition.aboveTheWrap
|
|
else scrollPositionNew = ScrollPosition.showing
|
|
|
|
if (scrollPosition !== scrollPositionNew) setScrollPosition(scrollPositionNew)
|
|
},
|
|
{ wait: 100 },
|
|
)
|
|
|
|
return {
|
|
handleScroll,
|
|
scrollPosition,
|
|
}
|
|
}
|
|
|
|
export default useStickyScroll
|