load more data on scroll vuejs laravel 8 tutorial

So today we are going to see how to load data from database when user scrolls. We are going to have a project from scratch.

so you need to have a project setup in laravel.

Install Vujs in your project Check here

Once you have the vue component created in project then we can work on scrolling and loading data part.

so we can give a div id let's say "infinite-list"

and then we check the scroll if reaches the bottom. So for that you need to give id "infinite-list" a particular height and data should be overflowing so that scrollbar appears. and the we can use code to check if scrollbar reaches the bottom using code like this

          const listElem = document.querySelector('#infinite-list');
            listElem.addEventListener('scroll', e => {
                if(listElem.scrollTop + listElem.clientHeight >= listElem.scrollHeight){
                   //this function fires and load more records when scroll bar reaches              bottom 
                   this.loadmore();
                }
            });

We need to create Controller and Model and We need to setup route to fetch data and then we need to create a vuejs component to display the content. you can check step by step guide here

You can download the code zip and can use it if you want to.

Download code:

https://zarx.biz/download/file/f0a9e02f29badd70ffc968d53

Hope this helps you.