Introduction to the

Paging, optimization, viewable area, infinite loading

One of the most common development requirements encountered when writing front-end pages is to render the data objects returned by back-end data, and when there are too many data objects, paging is required.

There are three common types of paging:

  1. Generated at the bottom of the pageThe previous page,The next page,Page listsButton.
    • Users can directly choose the page they want to view.
    • There is no need to worry about page data congestion.
    • Compared with theAutomatically load more dataSlightly unintelligent.
  2. Generated at the bottom of the pageLoad more dataButton.
    • Better experience than generating page-related buttons at the bottom of the page
    • Users can control whether they need to load more data.
    • Compared with theAutomatically load more dataSlightly unintelligent.
    • It is necessary to pay attention to the lag caused by excessive page data.
  3. When the user scrolls to the bottom of the pageAutomatically load more data.
    • It’s good to be more intuitive.
    • It is necessary to pay attention to the lag caused by excessive page data.
    • If there’s other data in the footer the user has to go through the data to see the footer.

Of course, there is no silver bullet for pagination. It has to be tweaked and cross-matched for different situations. For example, when the footer of a page has data that needs to be viewed by the user, it can be used to automatically load more data. When two or three pages are loaded, the prompt to load more data button will be used, so that the specific user can easily see more scenes of the footer content.

We can refer to the case given in chunk 30 seconds a day to reduce DOM nodes by using data grouping display to optimize page lag. Pagination and related optimization will not be discussed here.

The code shared today is a function used during pagination to determine if it has reached the bottom of the page:

/ / the source code from https://30secondsofcode.org
const bottomVisible = () = >
  document.documentElement.clientHeight + window.scrollY >=
  (document.documentElement.scrollHeight || document.documentElement.clientHeight);
Copy the code

The code analysis

The height of the visible area of the window and the height of the distance the window has been scrolled to get the current page position:

document.documentElement.clientHeight + window.scrollY
Copy the code

Then compare it with the height of the whole page to determine whether it has reached the bottom of the page. If the height of the whole page does not exist, use the height of the visible area of the window instead:

. > = (document.documentElement.scrollHeight || document.documentElement.clientHeight)
Copy the code

Tip: use | | skills to initialize the data

Usage scenarios

Do a pagination feature that loads data items indefinitely, loading data when the page reaches the bottom.


// Listen for page scrolling
document.addEventListener('scroll'.() = > {
    // If you reach the bottom of the page
    if(bottomVisible()) {
        1. Send a network request to obtain data
        // 2. Insert data into the page}});Copy the code

Similar code

Determine if you have reached the top of the page

const topVisible = () = > window.scrollY == 0
Copy the code

Grow up together

In the confused city, there is always a partner to grow up together.

  • You can click on this if you want more people to see the articlegive a like.
  • If you want to inspire your mistress thereGithubGive aLittle stars.
  • If you want to communicate more with small two add wechatm353839115.

PushMeTop originally contributed to this article