From 2a7bfd45e1ee56e82426a67d9f3f3ba5a7839185 Mon Sep 17 00:00:00 2001
From: David Arico <davidarico87@gmail.com>
Date: Fri, 14 Oct 2022 09:05:11 -0700
Subject: [PATCH] feat: Emit events for scroll to begin and end of list (#364)

Co-authored-by: Guillaume Chau <guillaume.b.chau@gmail.com>
---
 README.md                                       |  2 ++
 docs-src/src/components/RecycleScrollerDemo.vue | 10 ++++++++++
 src/components/RecycleScroller.vue              |  3 +++
 3 files changed, 15 insertions(+)

diff --git a/README.md b/README.md
index 7fd75c4d..15195eef 100644
--- a/README.md
+++ b/README.md
@@ -205,6 +205,8 @@ When the user scrolls inside RecycleScroller, the views are mostly just moved ar
 - `visible`: emitted when the scroller considers itself to be visible in the page.
 - `hidden`: emitted when the scroller is hidden in the page.
 - `update (startIndex, endIndex, visibleStartIndex, visibleEndIndex)`: emitted each time the views are updated, only if `emitUpdate` prop is `true`
+- `scroll-start`: emitted when the first item is rendered.
+- `scroll-end`: emitted when the last item is rendered.
 
 ### Default scoped slot props
 
diff --git a/docs-src/src/components/RecycleScrollerDemo.vue b/docs-src/src/components/RecycleScrollerDemo.vue
index f02dd94e..98d17ca8 100644
--- a/docs-src/src/components/RecycleScrollerDemo.vue
+++ b/docs-src/src/components/RecycleScrollerDemo.vue
@@ -84,6 +84,8 @@
           @update="onUpdate"
           @visible="onVisible"
           @hidden="onHidden"
+          @scroll-start="onScrollStart"
+          @scroll-end="onScrollEnd"
         >
           <template v-slot="props">
             <div
@@ -206,6 +208,14 @@ export default {
     onHidden () {
       console.log('hidden')
     },
+
+    onScrollStart () {
+      console.log('scroll start')
+    },
+
+    onScrollEnd () {
+      console.log('scroll end')
+    },
   },
 }
 </script>
diff --git a/src/components/RecycleScroller.vue b/src/components/RecycleScroller.vue
index 5ceb568f..ba86b1ff 100644
--- a/src/components/RecycleScroller.vue
+++ b/src/components/RecycleScroller.vue
@@ -499,6 +499,9 @@ export default {
 
         // No view assigned to item
         if (!view) {
+          if (i === items.length - 1) this.$emit('scroll-end')
+          if (i === 0) this.$emit('scroll-start')
+
           type = item[typeField]
           unusedPool = unusedViews.get(type)