Scroll event Implementation Monitoring scroll bar and paging display (zepto.js) _javascript tips

requirements: at the bottom of the app landing page shows the previous purchase records of other users, the requirement that this div box show only 3 and a half, but a page has 10, the div within the slider slide to the bottom of the page automatically load the next page concurrent loading buried point.

realization: First understand three concepts, respectively, is contenth,viewh,scrolltop.

contenth: The height of the content of the element to be slid, including the visible part and the invisible part below the scroll bar.

VIEWH: That's the height of the div we see, not including the visible part or the invisible part below the scroll bar.

scrolltop: that is, the distance from the top of the scroll bar, if the value of ScrollTop is 0, then the scroll bar is on top. Pull the scroll bar, from the top to the bottom, the change is the value of scrolltop. Example: If the height of the Contenth is 2000, and the div's height is only 300, then 1700 is not visible, pulling the scroll bar to the bottom, at this point the scrolltop is 1700, so this 1700 can also be understood as the length of the scroll bar can be scrolled. When the slider pulls to the bottom, contenth=viewh+scrolltop.

It can be achieved as follows:

$.ajax ({type: "Get", url: "Record.json",//test with fake data dataType: "JSON", Success:function (Records) {var showlen gth = records.data.length;//total length to display var flag = Showlength <= 10?
    Showlength:10; Load_records (0, flag);//Start Loading first page Hxmclickstat (' mar_all_207_ssjk.goumai.load. ' + 1, {url_ver: "SJCGBS-10030"});/
      Send the first page buried if (Showlength >) {var origin = 1, load = 2, regardless of whether the length is more than 10;
        $ ('. Records_body '). Scroll (function () {var contenth = $ (this). Get (0). scrollheight;
        var VIEWH = $ ('. Records_body '). Height ();
        var scrolltop = $ (this). ScrollTop (); 
          var pages = Math.ceil (SHOWLENGTH/10)//Total number of pages to display if (viewh + scrolltop = = contenth && load <= pages) {
            if (load * < Showlength) {load_records (origin++ *, load++ * 10);//Load next page 10 data
            Hxmclickstat (' mar_all_207_ssjk.goumai.load. ' + origin, {url_ver: "SJCGBS-10030"});//drop to bottom start loading next page send buried point} else { Load_recoRDS (Origin *, showlength);//Load last page hxmscrollbottomstat (' Mar_all_207_ssjk.goumai.bottom ', {url_ver: "sjcgbs-
 10030 "});//Last page send buried point load++;//avoid repeat execution}  } }); function Load_records (start, end) {for (var i = start I < end; i++) {var stime = Records.data[i]
        . Time;
        var accure_time = Stime.slice (5, stime.length); var record_html = ' <div class= ' records_item ' ><div class= "Buyer_info" ><p class= "Buyer_name" > ' + records.data[i].account + ' </p><p class= ' status_title "> Purchase Success </p></div>\n\< ' + ' div class=" buyer_address "><p class=" buy_address ">" + Records . data[i].city + ' IP: ' + records.data[i].ip + ' </p>\n\< ' + ' P class= ' buy_time ' > ' + accure_time + ' &L
        T;/p></div></div> ';  $ (record_html). Appendto ('. Records_body ');//Insert a purchase record}}, Error:function () {Console.log (' some
  Happened! '); }
});

The above method will not achieve the expected effect in the Apple mobile browser, the solution and the Code improvement

Change the condition of bottoming to

if (VIEWH + scrolltop +1>= contenth && load <= pages)

The reason, so in the rolling will be scrolltop and VIEWH, Contenth separately printed out, slippery to the bottom of the time found that they have 1 units of error, may be because some div elements of the height is not an integer and JS in the judgment of the time directly to the whole, so you can choose to add it 1.

You can also use a different way to determine the percentage of the condition: the scroll bar from the bottom 2%:scrolltop/(CONTENTH–VIEWH) >= 0.98.

or use the absolute value range to achieve the scroll bar from the bottom 30px:contenth–viewh–scrolltop <=.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.