fix: Account for the height of the leading and trailing slots when calculating visible items, fix #685

Co-authored-by: Daniel Gidman <[email protected]>

Author: danatcofo

docs-src/src/components/DynamicScrollerDemo.vue

@@ -17,7 +17,11 @@
           The message heights are unknown.
         </div>
       </template>
-
+      <template #after>
+        <div class="notice">
+          You have reached the end.
+        </div>
+      </template>
       <template v-slot="{ item, index, active }">
         <DynamicScrollerItem
           :item="item"

src/components/RecycleScroller.vue

@@ -12,6 +12,7 @@
     <div
       v-if="$slots.before"
       class="vue-recycle-scroller__slot"
+      ref="before"
     >
       <slot
         name="before"
@@ -43,6 +44,7 @@
     <div
       v-if="$slots.after"
       class="vue-recycle-scroller__slot"
+      ref="after"
     >
       <slot
         name="after"
@@ -316,6 +318,18 @@ export default {
         scroll.start -= buffer
         scroll.end += buffer
 
+        // account for leading slot
+        if (this.$refs.before){
+          const lead = this.$refs.before.scrollHeight;
+          scroll.start -= lead;
+        }
+
+        // account for trailing slot
+        if (this.$refs.after){
+          const trail = this.$refs.after.scrollHeight;
+          scroll.end += trail;
+        }
+
         // Variable size mode
         if (itemSize === null) {
           let h