diff options
Diffstat (limited to 'packages/client/src/scripts/scroll.ts')
| -rw-r--r-- | packages/client/src/scripts/scroll.ts | 15 |
1 files changed, 12 insertions, 3 deletions
diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts index 621fe88105..0643bad2fb 100644 --- a/packages/client/src/scripts/scroll.ts +++ b/packages/client/src/scripts/scroll.ts @@ -1,9 +1,13 @@ type ScrollBehavior = 'auto' | 'smooth' | 'instant'; -export function getScrollContainer(el: Element | null): Element | null { - if (el == null || el.tagName === 'BODY') return null; +export function getScrollContainer(el: HTMLElement | null): HTMLElement | null { + if (el == null || el.tagName === 'HTML') return null; const overflow = window.getComputedStyle(el).getPropertyValue('overflow'); - if (overflow.endsWith('auto')) { // xとyを個別に指定している場合、hidden auto みたいな値になる + if ( + // xとyを個別に指定している場合、`hidden scroll`みたいな値になる + overflow.endsWith('scroll') || + overflow.endsWith('auto') + ) { return el; } else { return getScrollContainer(el.parentElement); @@ -22,6 +26,11 @@ export function isTopVisible(el: Element | null): boolean { return scrollTop <= topPosition; } +export function isBottomVisible(el: HTMLElement, tolerance = 1, container = getScrollContainer(el)) { + if (container) return el.scrollHeight <= container.clientHeight + Math.abs(container.scrollTop) + tolerance; + return el.scrollHeight <= window.innerHeight + window.scrollY + tolerance; +} + export function onScrollTop(el: Element, cb) { const container = getScrollContainer(el) || window; const onScroll = ev => { |