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

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?

[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 😄

[trizotti]

Hey guys, how do you scroll to an specific item on the list programatically?