[Vuejs]-How do I create an infinite scroll section in vuejs?

by

0👍

You can use scroll detection to determine if the scroll reach to end and add more items;

Here is an example of how to achieve that!

Html:

<div :style="height:350px ';overflow-y: auto;overflow-x: hidden;'" @scroll="onScroll">
HTML CODE HERE
</div>

We set the style to have a fixed height in this case the example works for vertical infinite scroll. But you can adapt to use for horizontal.

We use the @scroll to detect when a scroll is executed and call the onScroll(e) function

Javascript

onScroll(e){
  if((e.target.offsetHeight + e.target.scrollTop) >= e.target.scrollHeight) {
    // Insert your logic here! Request api for example and add to the list of items
  }
},

This function compares if the scroll reaches the end and execute the code.

Extra:

You can add a transition group to your HTML to give the effect of items being added.

If your items are static and they are hardcoded they are other approaches, let me know if this is the case

Leave a comment