Scroll events implement monitoring of the scroll bar and display on pages (zepto. js), scrollzepto. js

Scroll events implement monitoring of the scroll bar and display on pages (zepto. js), scrollzepto. js

Requirements:The previous purchase records of other users are displayed at the bottom of the APP landing page. This div box is required to display only three and a half items, but there are 10 items on one page, slide the slide in the div to the bottom of a page to automatically load the next page and concurrently load the tracking.

Implementation:First, understand three concepts: contentH, viewH, and scrollTop.

ContentH: the height of the element content to slide, including the visible part and the invisible part under the scroll bar.

ViewH: the height of the DIV we see. The visible part is not included or the invisible part under the scroll bar.

ScrollTop: the distance between the scroll bar and the top. If the value of scrollTop is 0, it indicates that the scroll bar is at the top. Pull the scroll bar. From top to bottom, the value of scrollTop is changed. For example, if the height of contentH is 2000, and the height of this DIV is only 300, 1700 is invisible and the scroll bar is pulled to the bottom. In this case, scrollTop is 1700, so this 1700 can also be understood as the scroll length of the scroll bar. When the slider is pulled to the bottom, contentH = viewH + scrollTop.

Therefore, it can be implemented as follows:

$. Ajax ({type: "get", url: "record. json ", // ype:" json ", success: function (records) {var showLength = records. data. length; // The total length to be displayed var flag = showLength <= 10? ShowLength: 10; load_records (0, flag); // start loading hxmClickStat ('mar _ all_207_ssjk.goumai.load. '+ 1, {url_ver: "SJCGBS-10030"}); // send the first page burial point if (showLength> 10) {var origin = 1, regardless of whether the length is greater than 10, 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); // required Total number of pages to be displayed if (viewH + scrollTop = contentH & load <= pages) {if (load * 10 <showLength) {load_records (origin ++ * 10, load ++ * 10); // load 10 pieces of data on the next page. hxmClickStat ('mar _ all_207_ssjk.goumai.load. '+ origin, {url_ver: "SJCGBS-10030"}); // Send tracking when sliding to the bottom to start loading the next page} else {load_records (origin * 10, showLength ); // load the last page hxmScrollBottomStat ('mar _ all_207_ssjk.goumai.bottom ', {url_ver: "SJCGBS-10030"}); // The last page sends the tracking loa D ++; // avoid repeated 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 successful </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> '; $ (record_html ). appendTo ('. records_body '); // insert a purchase record }}, error: function () {console. log ('some errors happened! ');}});

The above methods fail to achieve the expected results in the Apple mobile browser, and the solution and code are improved.

Change the bottoming condition

If (viewH + scrollTop + 1> = contentH & load <= pages)

The reason is that scrollTop, viewH, and contentH are printed separately during scrolling. When sliding to the bottom, they find that they have an error of one unit, it may be because the height of some div elements is not an integer, and js directly rounds them during judgment, so you can add it to 1.

You can also use another method to determine the percentage: scrollTop/(contentH-viewH)> = 2% at the bottom of the scroll bar.

Or use the absolute value range. the scroll bar is 30 PX away from the bottom: contentH-viewH-scrollTop <= 30.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.