12345678910111213141516171819202122232425262728293031323334 |
- 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 })
- })
- }
- }
|