javascript – How to implement smooth loading scrolling in React.js?

Question:

Good day! There is a task: on the site page, namely in projects, the task is to implement scrolling with smooth loading of pictures and text (all projects). How to implement this?

Answer:

On first load, execute getContent ():

function getContent() {
  apiMethod({ start: 0, count: 20 });
}

Component:

import React from 'react';

function onScrollList(event) {
  const scrollBottom = event.target.scrollTop + 
        event.target.offsetHeight == event.target.scrollHeight;

    if (scrollBottom) {
      loadContent(); //API method
    }
  }
}

function DataList() {
  return (
    <div onScroll={event => onScrollList(event)}>
      {props.children}
    </div>
  );
}

export default DataList;

In the API, look at the number of already loaded elements, compare with the total number of elements, if total> loaded, then make a request:

function loadContent() {
  const total = 100;
  const data = []; // lenght == 40

  if(data.lenght < total) {
    apiMethod({ start: data.lenght, count: 20 });
  }
}

PS: And the planned appearance of the content can be done in CSS:

<div onScroll={event => onScrollList(event)} style={{ transition: ease 0.5s }}>
  {props.children}
</div>