diff --git a/src/client/scripts/paging.ts b/src/client/scripts/paging.ts index f002c9f55..07eaf20ff 100644 --- a/src/client/scripts/paging.ts +++ b/src/client/scripts/paging.ts @@ -1,32 +1,5 @@ import Vue from 'vue'; - -function getScrollContainer(el: Element | null): Element | null { - if (el == null || el.tagName === 'BODY') return null; - const style = window.getComputedStyle(el); - if (style.getPropertyValue('overflow') === 'auto') { - return el; - } else { - return getScrollContainer(el.parentElement); - } -} - -function getScrollPosition(el: Element | null): number { - const container = getScrollContainer(el); - return container == null ? window.scrollY : container.scrollTop; -} - -function onScrollTop(el, cb) { - const container = getScrollContainer(el) || window; - const onScroll = ev => { - if (!document.body.contains(el)) return; - const pos = getScrollPosition(el); - if (pos === 0) { - cb(); - container.removeEventListener('scroll', onscroll); - } - }; - container.addEventListener('scroll', onScroll, { passive: true }); -} +import { getScrollPosition, onScrollTop } from './scroll'; const SECOND_FETCH_LIMIT = 30; diff --git a/src/client/scripts/scroll.ts b/src/client/scripts/scroll.ts new file mode 100644 index 000000000..76881bbde --- /dev/null +++ b/src/client/scripts/scroll.ts @@ -0,0 +1,27 @@ +export function getScrollContainer(el: Element | null): Element | null { + if (el == null || el.tagName === 'BODY') return null; + const style = window.getComputedStyle(el); + if (style.getPropertyValue('overflow') === 'auto') { + return el; + } else { + return getScrollContainer(el.parentElement); + } +} + +export function getScrollPosition(el: Element | null): number { + const container = getScrollContainer(el); + return container == null ? window.scrollY : container.scrollTop; +} + +export function onScrollTop(el: Element, cb) { + const container = getScrollContainer(el) || window; + const onScroll = ev => { + if (!document.body.contains(el)) return; + const pos = getScrollPosition(el); + if (pos === 0) { + cb(); + container.removeEventListener('scroll', onscroll); + } + }; + container.addEventListener('scroll', onScroll, { passive: true }); +}