[H5 bottom scrolling paging loading]

Web pages realize rolling paging loading

Waterfall flow scrolling loading , Used to show long lists , When the list is about to scroll to the bottom , Events are triggered and more list items are loaded .

Technical preparation

Core attributes ：

					scrollTop:  The height of the web page being rolled away 

​					clientHeight:  The height of the current viewing area 

​					scrollHeight:  Document flow height 

​					distance: How far to the bottom of the page to trigger 

Determine whether to reach the bottom formula ：

scrollTop+clientHeight>=scrollHeight-distance

Specific judgment method

 /** \*  Add scrolling Events  */

 addScroll(): void {
    

  window.addEventListener("scroll", this.watchScroll, true);

 }

 /** \*  Remove scrolling events  */

 removeScroll(): void {
    

  window.removeEventListener("scroll", this.watchScroll, true);

 }

 //  Scroll paging , Screen scrolling event callback 

 watchScroll(): void {
    

  //  Scroll bar to the bottom and do not complete the search （ And more data ）

  if (this.isWindowBottom() && !this.pageFinished) {
    

   ++this.currentPage;

   this.recieveRecommend();

  }

 }

 //  Scroll paging , Judge whether the current scroll bar has reached the bottom 

 public isWindowBottom(): boolean {
    

  //  When the scroll bar scrolls , Distance from the top 

  const scrollTop =

   document.documentElement.scrollTop || document.body.scrollTop;

  //  The height of the viewing area , Numerically and “ Height of scroll bar rollers ” equal , Only the length unit is different 

  const windowHeight =

   document.documentElement.clientHeight || document.body.clientHeight;

  //  The total height of the scroll bar 

  const scrollHeight =

   document.documentElement.scrollHeight - 100 ||

   document.body.scrollHeight - 100;

  return scrollTop + windowHeight >= scrollHeight;

 }