mirror of
https://github.com/koel/koel
synced 2024-12-24 19:43:06 +00:00
19 lines
661 B
TypeScript
19 lines
661 B
TypeScript
|
import { Directive } from 'vue'
|
||
|
|
|
||
|
|
const toggleClasses = (el: HTMLElement) => {
|
||
|
|
el.classList.toggle('fade-top', el.scrollTop !== 0)
|
||
|
|
el.classList.toggle('fade-bottom', el.scrollTop + el.clientHeight !== el.scrollHeight)
|
||
|
|
}
|
||
|
|
|
||
|
|
const observeVisibility = (el: HTMLElement, callback: Closure) => {
|
||
|
|
const observer = new IntersectionObserver(entries => entries.forEach(entry => entry.isIntersecting && callback()))
|
||
|
|
observer.observe(el)
|
||
|
|
}
|
||
|
|
|
||
|
|
export const overflowFade: Directive = {
|
||
|
|
mounted: async (el: HTMLElement) => {
|
||
|
|
observeVisibility(el, () => toggleClasses(el))
|
||
|
|
el.addEventListener('scroll', () => requestAnimationFrame(() => toggleClasses(el)))
|
||
|
|
}
|
||
|
|
}
|