Akryum · December 15, 2019 14:40 · Dec 15, 2019 · Dec 15, 2019
diff --git a/List.vue b/List.vue
@@ -0,0 +1,19 @@
+<script>
+import { ref } from '@vue/composition-api'
+import { onScrollBottom } from '@/scroll'
+
+export default {
+  setup () {
+    function loadMore () {
+      // ...
+    }
+    
+    const el = ref()
+    onScrollBottom(loadMore, el, 600)
+  
+    return {
+      el,
+    }
+  }
+}
+</script>
diff --git a/scroll.js b/scroll.js
@@ -0,0 +1,50 @@
+import { onUnmounted, watch } from '@vue/composition-api'
+
+function getScrollParent (node) {
+  if (node == null) {
+    return null
+  }
+
+  if (node.scrollHeight > node.clientHeight) {
+    if (node === document.documentElement) {
+      return { emitter: document, scroller: document.documentElement }
+    }
+    return { emitter: node, scroller: node }
+  } else {
+    return getScrollParent(node.parentNode)
+  }
+}
+
+export function onScrollBottom (handler, el, offsetFromBottom) {
+  let scrollParent
+
+  function onScroll () {
+    const { scroller } = scrollParent
+    if (scroller.scrollTop >= scroller.scrollHeight - scroller.clientHeight - offsetFromBottom) {
+      handler()
+    }
+  }
+
+  function addListeners () {
+    removeListeners()
+    if (!el.value) return
+    scrollParent = getScrollParent(el.value)
+    if (scrollParent) {
+      scrollParent.emitter.addEventListener('scroll', onScroll)
+    }
+  }
+
+  function removeListeners () {
+    if (scrollParent) {
+      scrollParent.emitter.removeEventListener('scroll', onScroll)
+    }
+  }
+
+  watch(el, () => {
+    addListeners()
+  })
+
+  onUnmounted(() => {
+    removeListeners()
+  })
+}