dark
5 months ago
6 changed files with 130 additions and 7 deletions
-
67src/hooks/useScrollMask.ts
-
47src/hooks/useScrollStyle.ts
-
5src/layout/TwoColPageLayout.tsx
-
4src/layout/style.ts
-
2src/pages/system/menus/index.tsx
-
12src/pages/system/menus/style.ts
@ -0,0 +1,67 @@ |
|||||
|
import { useEffect } from 'react' |
||||
|
|
||||
|
type Ref = { current: Element } |
||||
|
|
||||
|
const useScrollMask = (ref: Ref | string) => { |
||||
|
useEffect(() => { |
||||
|
let element: Ref |
||||
|
if (typeof ref === 'string') { |
||||
|
|
||||
|
element = { |
||||
|
current: document.querySelector(ref)! |
||||
|
} |
||||
|
if (!element.current) return |
||||
|
} else { |
||||
|
element = ref as Ref |
||||
|
} |
||||
|
|
||||
|
if (!element.current) return |
||||
|
|
||||
|
const handleScroll = () => { |
||||
|
const { scrollTop, scrollHeight, clientHeight } = element.current |
||||
|
const atTop = scrollTop === 0 |
||||
|
const atBottom = scrollTop + clientHeight === scrollHeight |
||||
|
|
||||
|
if (atTop && atBottom) { |
||||
|
element.current.setAttribute('data-top-bottom-scroll', 'true') |
||||
|
element.current.removeAttribute('data-top-scroll') |
||||
|
element.current.removeAttribute('data-bottom-scroll') |
||||
|
} else if (atTop) { |
||||
|
element.current.setAttribute('data-top-scroll', 'true') |
||||
|
element.current.removeAttribute('data-bottom-scroll') |
||||
|
element.current.removeAttribute('data-top-bottom-scroll') |
||||
|
} else if (atBottom) { |
||||
|
element.current.setAttribute('data-bottom-scroll', 'true') |
||||
|
element.current.removeAttribute('data-top-scroll') |
||||
|
element.current.removeAttribute('data-top-bottom-scroll') |
||||
|
} else { |
||||
|
element.current.setAttribute('data-top-bottom-scroll', 'true') |
||||
|
element.current.removeAttribute('data-bottom-scroll') |
||||
|
element.current.removeAttribute('data-top-scroll') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const checkScroll = () => { |
||||
|
const hasVerticalScrollbar = element.current.scrollHeight > element.current.clientHeight |
||||
|
|
||||
|
if (hasVerticalScrollbar) { |
||||
|
element.current.classList.add('scroll-mask') |
||||
|
} else { |
||||
|
element.current.classList.remove('scroll-mask') |
||||
|
} |
||||
|
|
||||
|
handleScroll() // Initial check
|
||||
|
} |
||||
|
|
||||
|
element.current.addEventListener('scroll', handleScroll) |
||||
|
window.addEventListener('resize', checkScroll) |
||||
|
checkScroll() |
||||
|
|
||||
|
return () => { |
||||
|
element.current.removeEventListener('scroll', handleScroll) |
||||
|
window.removeEventListener('resize', checkScroll) |
||||
|
} |
||||
|
}, [ ref ]) |
||||
|
} |
||||
|
|
||||
|
export default useScrollMask |
Write
Preview
Loading…
Cancel
Save
Reference in new issue