Scroll event Implementation Monitoring scroll bar and pagination Display example (zepto.js)

Scroll event Implementation Monitoring scroll bar and pagination display example (zepto.js )

Requirements: in the app landing page at the bottom of the previous User's purchase record, request this div box only show 3 and a half, but a page has 10, the Div sliding bar to the bottom of the page to automatically load the next page of concurrent loading buried Point.

Implementation: 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: the height of the div that we see, not including the visible part or the invisible part below the scrollbar.

Scrolltop: that is, the distance from the top of the scrollbar, and if the value of ScrollTop is 0, the scroll bar is at the Top. Pull the scroll bar, from top to bottom, and change the value of Scrolltop. Example: If the height of the contenth is 2000, and the height of this div is only 300, then there are 1700 not visible, pull the scroll bar to the bottom, this time scrolltop is 1700, so this 1700 can also be understood as the scroll bar can scroll the Length. When the slider is pulled to the bottom, contenth=viewh+scrolltop.

So it can be achieved as follows:

$.ajax ({type: "get", url: "record.json",//test with false data dataType: "json", success:function (records) {var s Howlength = Records.data.length;//need to display the total length var flag = showlength <= 10?        showlength:10; Load_records (0, Flag);//start loading the first page Hxmclickstat (' mar_all_207_ssjk.goumai.load. ' + 1, {url_ver: "SJCGBS-10030"});//regardless of length            Whether more than 10 send the first page of the Buried dot if (showlength >) {var origin = 1, Load = 2;                $ ('. 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);//the Total number of pages that need to be displayed if (VIEWH + scrolltop = contenth && load <= p Ages) {if (load * < Showlength) {load_records (origin++ *), load++ * 10 )///load the next page of 10 data hxmclickstat (' mar_all_207_ssjk.goumai.load. ' + Origin, {url_ver: "SJCGBS-10030"});//swipe to the bottom to start loading the next page when sending the buried point} else {load_records (orig In *, showlength);//load last page hxmscrollbottomstat (' mar_all_207_ssjk.goumai.bottom ', {url_ver: "SJCG        BS-10030 "});//last page Send buried point load++;//avoid repetition}});  } 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 + ' </p></div></div> ';        $ (record_html). appendTo ('. records_body ');//insert a purchase record}}}, error:function () {    Console.log (' Some errors happened! '); }});

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

Change the Bottom-of-touch criterion to

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

　　The reason, so in the rolling scrolltop and viewh, contenth respectively printed out, sliding to the bottom of the department found that they have 1 units of error, may be because some of the height of the div element is not an integer and JS in the judgment of the time directly to the whole, so you can choose to add 1.

You can also do this by using a different percentage of the Criteria: within 2% of the scroll bar distance: scrolltop/(contenth–viewh) >= 0.98.

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

Scroll event Implementation Monitoring scroll bar and pagination Display example (zepto.js)