Vue Infinite Scroll

Vue infinite-scroll

Demo

Features

• load more data with Lazy Loading while user scroll view to bottom

  • Method 1 : use event listeners on the scroll, resize and orientationChange events in the browser
  • Method 2 : using the Intersection Observer API detect when an element enters the viewport and take an action
  • event listeners vs. Intersection Observer

    • using the Intersection Observer API action is triggered quicker

      (the site doesn’t appear sluggish at all.)

    • using the event listeners, we had to add a timeout to make it performant

      (slightly negative impact on the user experience as the data load is triggered with a slight delay.)

• e2e test

  • simulate user scroll view to bottom and observe the load more action

Setup

• optimization the developer experience : make aliases for file paths
• commit message follow the Conventional Commits format
• use FakeStoreAPI

Preview