HTML5 Mall development One floor rolling load data

For the floor load in the past is just an idea, never realized, just the project encountered, and then summed up

Scene: HTML5, local product list information scrolling (local scroll bar)

1. Set the height of the Subcategoryscroll by JQ to display the height of the screen (assuming 100), set the height of the productlist to the actual height of the list information (assuming 300)

<div id="subcategoryscroll" style="Overflow:hidden; OVERFLOW-Y: scroll; ">    class="list-inline mb0 ml0" id="  ProductList">          <li> Product Information area </li>    </ul></div>

2. Scroll the script, implement if pull to the bottom, will load the next page display; Roll back without triggering the Load event (emphasis)

    varpage =1;//the loaded index    varIsload =true;//sets whether to terminate the scrolling load    varCurscrollheight =0;//Current scroll position    varCurcount =1;//counter to prevent repeated loading of the next page when scrolling$("#subCategoryScroll"). Scroll (function () {varPageHeight = $ ("#productlist"). Height (); varShowheight = $ ("#subCategoryScroll"). Height (); varScrollHeight = $ ("#subCategoryScroll"). scrolltop (); if(Curscrollheight-scrollheight <Ten&& curscrollheight>0) {             if(Curcount = =1) {page+=1; Loadproducts (page); // load new data} Curcount++;//load Next page after counter +1        }        if(Curscrollheight <scrollheight) {Curscrollheight= Pageheight-showheight;//resets the current scroll position when scrolling to the bottom of the pageCurcount =1;    }     }); function Loadproducts (pageindex) {$.ajax ({URL: $ ("#GetDataUrl"). Val (), data: {"CurrentPageIndex": pageindex,"Condition": $("#Condition"). Val ()}, type:'GET', DataType:'JSON', timeout:10000,            Async:false, Success:function (resultdata) {if(Resultdata! =NULL) {                    varHTML =""; if(Resultdata.rows = =0&& pageindex = =1) {Isload=false; HTML="Sorry, there is no product! "                        $("#productlist"). append (HTML); }                    Else{$.each (resultdata.rows, function (I, item) {HTML='<li> Content </li>'; $("#productlist"). append (HTML);                        }); if(Resultdata.pagetotal = =pageindex) {Isload=false;    }                    }                }            }        }); }

The whole is not difficult, the key is the logical processing of rolling events

If it is the scroll bar of the body of the page, PageHeight, Showheight, ScrollHeight and $ (document). Height (), $ (window). Height (), $ (document). scrolltop () one by one correspondence

HTML5 Mall development One floor rolling load data