The method of jquery to determine whether the scroll bar reaches the bottom: 1. Use the [scrollTop()] method, jQuery detects the browser window scroll bar reaches the bottom; 2. Use [scroll_div] to detect the event that the moving bar reaches the bottom.
The operating environment of this tutorial: windows7 system, jquery 3.2.1 version, this method is applicable to all brand computers. Jquery
method to determine whether the
scroll bar reaches the bottom : 1. jQuery detects the browser window scroll bar reaches the bottom
jQuery obtains the position and size related functions:
$(document).height() Get the height of the entire page
$(window).height() Get the current height of the part of the page that the browser can see. This size will change when you zoom in and out of the browser window. It is different from the document.
scrollTop() gets the offset of the matched element relative to the top of the scroll bar.
scrollLeft() Get the offset of the matched element relative to the left side of the scroll bar.
scroll([[data],fn]) When the scroll bar changes, the scroll event is violated.
jQuery detects that the scroll bar reaches the bottom. Code:
1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() { $(window).scroll(function() {
if ($(document).scrollTop()<=0){ alert("The scroll bar has reached the top of 0"); } if ($(document).scrollTop() >= $(document).height()- $(window).height()) { alert("The scroll bar has reached the bottom is" + $(document).scrollTop()); } }); }); 2. jQuery detects that the scroll bar in the div reaches the top half of the bottom The article introduces jQuery to detect the browser window scroll bar reaching the bottom. In fact, I don’t understand the concepts of scrollTop and scrollHeight. Usually the scroll bar is placed in a div. Check the event that the id is scroll_div when the scroll bar reaches the bottom as follows: 1 2 3 4 5 6 7
From www.php中文网.cn
from www.php中文网.cn
from www.php中文网.cn
First of all, you need to understand a few concepts:
scrollHeight: the height that the scroll bar needs to scroll, that is, the inner div, 10000px
scrollTop: the height of the scroll bar, which may be larger than the outer div 500px,
that is, the height of scrollDiv + the maximum height of scrollTop=scrollHeight
So detecting the height of the div scroll bar in the div is simple:
1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() { $("#scroll_div").scroll(function(){ var divHeight = $(this).height(); var nScrollHeight = $(this)[0].scrollHeight; var nScrollTop = $(this)[0].scrollTop; $("#input1").val(nScrollHeight) ; $("#input2").val(nScrollTop); $("#input3").val(divHeight);
if(nScrollTop + divHeight >= nScrollHeight) { alert("At the bottom"); } }); }); If the data is loaded asynchronously, the data is not loaded, and it violates the data loading request of the same page. I usually do Add a flag 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 $(document).ready(function() { var flag = false; $("#scroll_div").scroll (function(){ if(flag){ // return false during data loading ; } var divHeight = $(this).height();
var nScrollHeight = $(this)[0].scrollHeight;
var nScrollTop = $(this)[0].scrollTop;
$("#input1").val(nScrollHeight);
$("#input2").val(nScrollTop );
$("#input3").val(divHeight);
if(nScrollTop + divHeight >= nScrollHeight) { //Request data flag = true; alert("The bottom is reached"); } }); }); related Free learning recommendation: javascript (video)