fix(infinite-scroll): should not trigger load when scroll up

packages/infinite-scroll/doc/disabled.vue

@@ -31,7 +31,7 @@ export default {
       setTimeout(() => {
         count.value += 2
         loading.value = false
-      }, 20000)
+      }, 2000)
     }
 
     return {

packages/infinite-scroll/src/index.ts

@@ -1,5 +1,7 @@
 import { nextTick } from 'vue'
-import { entries, isFunction, isNaN, throttle } from 'lodash'
+import { isFunction } from '@vue/shared'
+import { throttle } from 'lodash'
+import { entries } from '@element-plus/utils/util'
 import { getScrollContainer, getOffsetTopDistance } from '@element-plus/utils/dom'
 import throwError from '@element-plus/utils/error'
 import type { ObjectDirective, ComponentPublicInstance } from 'vue'
@@ -36,7 +38,8 @@ type InfiniteScrollEl = HTMLElement & {
     container: HTMLElement | Window
     containerEl: HTMLElement
     instance: ComponentPublicInstance
-    delay: number // for test
+    delay: number // export for test
+    lastScrollTop: number
     cb: InfiniteScrollCallback
     onScroll: () => void
     observer?: MutationObserver
@@ -51,7 +54,7 @@ const getScrollOptions = (el: HTMLElement, instance: ComponentPublicInstance): S
       let value = instance[attrVal] ?? attrVal ?? defaultValue
       value = value === 'false' ? false : value
       value = type(value)
-      acm[name] = isNaN(value) ? defaultValue : value
+      acm[name] = Number.isNaN(value) ? defaultValue : value
       return acm
     }, {} as ScrollOptions)
 }
@@ -66,13 +69,20 @@ const destroyObserver = (el: InfiniteScrollEl) => {
 }
 
 const handleScroll = (el: InfiniteScrollEl, cb: InfiniteScrollCallback) => {
-  const { container, containerEl, instance, observer } = el[SCOPE]
+  const {
+    container, containerEl,
+    instance, observer,
+    lastScrollTop,
+  } = el[SCOPE]
   const { disabled, distance } = getScrollOptions(el, instance)
+  const { clientHeight, scrollHeight, scrollTop } = containerEl
+  const delta = scrollTop - lastScrollTop
 
-  // trigger only if full check has done and not disabled
-  if (observer || disabled) return
+  el[SCOPE].lastScrollTop = scrollTop
+
+  // trigger only if full check has done and not disabled and scroll down
+  if (observer || disabled || delta < 0 ) return
 
-  const { clientHeight, scrollHeight, scrollTop } = containerEl
   let shouldTrigger = false
 
   if (container === el) {
@@ -120,7 +130,11 @@ const InfiniteScroll: ObjectDirective<InfiniteScrollEl, InfiniteScrollCallback>
 
     if (!container) return
 
-    el[SCOPE] = { instance, container, containerEl, delay, cb, onScroll }
+    el[SCOPE] = {
+      instance, container, containerEl,
+      delay, cb, onScroll,
+      lastScrollTop: containerEl.scrollTop,
+    }
 
     if (immediate) {
       const observer = new MutationObserver(throttle(checkFull.bind(null, el, cb), CHECK_INTERVAL))

packages/utils/util.ts

@@ -142,4 +142,10 @@ export function getRandomInt(max: number) {
   return Math.floor(Math.random() * Math.floor(max))
 }
 
+export function entries<T>(obj: Hash<T>): [string, T][] {
+  return Object
+    .keys(obj)
+    .map((key: string) => ([key, obj[key]]))
+}
+
 export { isVNode } from 'vue'