[Feature Request] Fire events in v-virtual-scroll

[dschreij]

Problem to solve

According to the docs, v-virtual-scroll doesn't fire any events, but it would be nice if it would fire one if it (almost) reaches the end of its items stream. You could hook this into a fetching function that retrieves more items and easily implement 'infinite scrolling' this way.

Proposed solution

When v-virtual-scroll reaches the end of its items stream, fire an event that designates this (for instance $emit('end-of-stream')). One could even make it configurable at how many items before the end of the stream the event should be fired?

[KaelWD]

It emits scroll, you could compare e.currentTarget.scrollHeight and e.currentTarget.scrollTop yourself.

[dschreij]

Thanks @KaelWD. Even though I could have found this out myself using the Vue devtools, maybe it's a good idea to mention this scroll event in the doc page of v-virtual-scroll ?

[dschreij]

Actually, I checked this in the vue devtools, and I see no scroll event emitted. Or is this a native JS event you are talking about?

[dschreij]

Alright @KaelWD, your suggestion lead me into the right direction. I indeed had to listen to the native scroll event of v-virtual-scroll, e.g.

<v-virtual-scroll
  :items="items"
  @scroll.native="scrolling"
>

Then the script to fire an event at the end of the stream is as follows:

import {debounce} from 'lodash'
export default {
    created () {
        this.scrolling = debounce(this.scrolling, 200)
    },
    scrolling (event) {
        const element = event.currentTarget || event.target
        if (element && element.scrollHeight - element.scrollTop === element.clientHeight) {
           this.$emit('scroll-end')
        }
    }
}

which did the trick. One could add a margin to the end area, so that items can already be fetched before the end of the current stream is reached, e.g.:

const margin = 50 // Get from somewhere else e.g. a prop
if (element && element.scrollHeight - element.scrollTop === element.clientHeight - margin) {

All in all, this was indeed relatively easy to achieve, but I still think this would be a worthwhile addition to the library 😄

[KaelWD]

#17265 adds a renderless prop so you could implement this by putting v-virtual-scroll inside v-infinite-scroll