gistfile1.txt

<template></template>

<script>
export default {
    props: {
        paginationBox: {
            required: true
        },
        src: {
            default: ''
        },
        margin: {
            default: 0
        }
    },
    data() {
        return {
            currentPage: 1,
            onLoad: false
        }
    },
    methods: {
        load(url, element) {
            return fetch(url).then((res) => {
                return res.text();
            }).then((data) => {
                let slicex = data.indexOf("<body");
                slicex = data.indexOf(">", slicex);    
                const slicey = data.lastIndexOf("</body>"); 
                const content = data.slice(slicex + 1, slicey);

                const body = document.createElement("body");
                body.innerHTML = content;

                const response = body.querySelector(element);

                if (response) {
                    return response.innerHTML;
                }
                return null;
            })
        },
        getMore() {
            this.currentPage++;
            this.onLoad = true;
            this.load(this.src + this.currentPage, this.paginationBox).then((data) => {
                const item = document.querySelector(this.paginationBox);
                item.innerHTML += data;
                this.onLoad = false;
            });
        },
        checkNeedMoreData() {
            let bottom = this.$el.getBoundingClientRect().bottom;
            bottom -= this.margin;
            return bottom <= window.innerHeight && !this.onLoad;
        }
    },
    mounted() {
        if (this.checkNeedMoreData()) {
            this.getMore();
        }

        window.addEventListener('scroll', () => {
            if (this.checkNeedMoreData()) {
                this.getMore();
            }
        });
    }
}
</script>