Q:

Loads more content after scrolling through old one using Vue and Axios?

So far I have something like this:
<template>
    <div class='sights-list'>
        <div v-for='(sight, index) in sights'>
            <p>{{ sight.name }}</p>
        </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data: function() {
        return {
            sights: []
        }
    },
    methods: {

    },
    mounted(){
        axios.get('/getSights/' + lat + '/' + lng + '/' + type)
            .then(response => {
                this.sights = response.data.result.results
        }).catch((error) => console.log(error));
    }
}

Now what I am trying to do is make another axios GET request when the user has scrolled past all the content that was generated from the GET request which was executed when the component was mounted.
Essentially, I'm not sure how to determine if the user has scrolled through the old content and reached the bottom of it. Any tips how to do that?

A:

I recently did something similar. I had to do it with pure javascript:
processInfiniteScroll = () => {
    this.window.addEventListener('scroll', (event) => {
        const sidenavBody = document.getElementsByClassName('list-group ul-lista-popup');

        if (sidenavBody && sidenavBody[0]){

            const finalPosition = sidenavBody[0].scrollHeight - sidenavBody[0].clientHeight;
            const scrollTop = sidenavBody[0].scrollTop;

            if (finalPosition - scrollTop <= 0) {
                const newIndex = (this.itemsReduced.length + 30) <= this.itemsCompleted.length ? (this.itemsReduced.length + 30) : this.itemsCompleted.length;

                const newArray = this.itemsCompleted.slice(0, newIndex);

                this.itemsReduced = newArray;
            }
        };
    }, true)
}

And call this method in mounted.
Of course, you must adapt this code to yours (mainly classname in getElementsByClassName).
I hope it helps you!

