[Vuejs]-VueJs – How can i know when the scroll bar of DIV reach its bottom

by

1👍

I am posting the answer for this question which i got it correctly. Actually i got ideas from someones comment in this question, which i am not able to see it now.
Adding code:

 mounted() {            
            let box = document.querySelector(".v-data-table__wrapper");
            // @ts-ignore
            box.addEventListener("scroll", this.scrollHandler);
        }
 /*
            * Infinite scroll event
        */
        scrollHandler(e) {
            // @ts-ignore
            let context = this.$store.state[this.$options.parent.fileName];

            if (!context.lazyLoading.enabled) {
                return;
            }

            let el = e.srcElement;
            // @ts-ignore
            this.reachedBottom = false;

            // @ts-ignore
            let context = this.$store.state[this.$options.parent.fileName];

            // @ts-ignore
            if (!this.reachedBottom) {
                if (el.scrollTop >= (el.scrollHeight - el.clientHeight) - 100) {
                    // @ts-ignore
                    this.reachedBottom = true;

                    if (context.lazyLoading.enabled && context.lazyRecords && context.lazyRecords.length > 0)
                        context.formData = context.lazyRecords.slice(0, (context.formData.length + (context.lazyLoading.initialRecordLoad || context.dashboard.lazyLoading.initialRecordLoad)));
                    else if (!context.lazyLoading.enabled)
                        context.formData = context.copyData.slice(0, (context.formData.length + (context.lazyLoading.initialRecordLoad || context.dashboard.lazyLoading.initialRecordLoad)));
                }
            }

            this.$nextTick(() => {
                // @ts-ignore
                this.reachedBottom = false;
            });
        }

Leave a comment