function findScrollParents($el) {
|
const $scrollParents = []
|
let $parent = $el.parentNode
|
|
while ($parent && $parent.nodeName !== 'BODY' && $parent.nodeType === document.ELEMENT_NODE) {
|
if (isScrollElment($parent)) $scrollParents.push($parent)
|
$parent = $parent.parentNode
|
}
|
$scrollParents.push(window)
|
|
return $scrollParents
|
}
|
|
function isScrollElment($el) {
|
// Firefox wants us to check `-x` and `-y` variations as well
|
const { overflow, overflowX, overflowY } = getComputedStyle($el)
|
return /(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)
|
}
|
|
export function setupResizeAndScrollEventListeners($el, listener) {
|
const $scrollParents = findScrollParents($el)
|
|
window.addEventListener('resize', listener, { passive: true })
|
$scrollParents.forEach(scrollParent => {
|
scrollParent.addEventListener('scroll', listener, { passive: true })
|
})
|
|
return function removeEventListeners() {
|
window.removeEventListener('resize', listener, { passive: true })
|
$scrollParents.forEach($scrollParent => {
|
$scrollParent.removeEventListener('scroll', listener, { passive: true })
|
})
|
}
|
}
|
