You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.6 KiB
58 lines
1.6 KiB
export function getScrollParent(el?: HTMLElement, includeHidden = false) {
|
|
while (el) {
|
|
if (includeHidden ? isPotentiallyScrollable(el) : hasScrollbar(el)) return el
|
|
el = el.parentElement!
|
|
}
|
|
|
|
return document.scrollingElement as HTMLElement
|
|
}
|
|
|
|
export function getScrollParents(el?: Element | null, stopAt?: Element | null) {
|
|
const elements: HTMLElement[] = []
|
|
|
|
if (stopAt && el && !stopAt.contains(el)) return elements
|
|
|
|
while (el) {
|
|
if (hasScrollbar(el)) elements.push(el as HTMLElement)
|
|
if (el === stopAt) break
|
|
el = el.parentElement!
|
|
}
|
|
|
|
return elements
|
|
}
|
|
|
|
export function hasScrollbar(el?: Element | null) {
|
|
if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
|
|
|
|
const style = window.getComputedStyle(el)
|
|
return style.overflowY === 'scroll' || (style.overflowY === 'auto' && el.scrollHeight > el.clientHeight)
|
|
}
|
|
|
|
function isPotentiallyScrollable(el?: Element | null) {
|
|
if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
|
|
|
|
const style = window.getComputedStyle(el)
|
|
return ['scroll', 'auto'].includes(style.overflowY)
|
|
}
|
|
|
|
export function getScrollBarWidth() {
|
|
const outer = document.createElement('div');
|
|
outer.style.overflow = 'scroll';
|
|
outer.style.height = '200px';
|
|
outer.style.width = '100px';
|
|
outer.style.position = 'fixed'
|
|
outer.style.opacity = '0'
|
|
outer.style.pointerEvents = 'none'
|
|
|
|
document.body.appendChild(outer);
|
|
const inner = document.createElement('div');
|
|
inner.style.width = '100%';
|
|
outer.appendChild(inner);
|
|
|
|
const widthNoScroll = outer.offsetWidth;
|
|
const widthWithScroll = inner.offsetWidth;
|
|
|
|
outer.remove()
|
|
|
|
return widthNoScroll - widthWithScroll;
|
|
}
|
|
|