Home > Article > Web Front-end > A method written in jquery to determine whether the div scroll bar has reached the bottom [recommended]_jquery

A method written in jquery to determine whether the div scroll bar has reached the bottom [recommended]_jquery

PHP中文网Original: 2016-05-16 15:03:041718browse

There are many concepts related to scroll bars in jQuery, but there are three properties related to the dragging of scroll bars, namely: scrollTop, scrollLeft, and scrollHeight. Among them, there are almost no application tips for the scrollHeight property found on the Internet, and I just need to use it.

We now only discuss the scrollTop and scrollHeight properties related to vertical scrolling.

1. Correct understanding of the relevant properties of the scroll bar:

Suppose there is the following Html code:

<div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
  <div style="height:750px;">
  </div>
</div>

Since the height of the inner p tag is longer than the outer one, and the outer p allows the vertical scroll bar to appear automatically, you can see the vertical scroll bar after opening it with a browser. Drag the scroll bar down a certain distance, and the page effect you see is as follows (a and b on the right are marked with PS after I captured the picture):

A method written in jquery to determine whether the div scroll bar has reached the bottom [recommended]_jquery

So, what are the scrollTop and scrollHeight properties of the external p here?

Some people say that scrollTop is equal to the a marked in the picture. scrollHeight is equal to the height of the outer p, 500px. Actually, none of them are right.

In fact, a and b marked in the picture have no specific meaning for us to program and write js code. It only has symbolic meaning.

In fact, in js code, the scroll bar is abstracted as a "point". scrollHeight is actually not the "height of the scroll bar" (b), but represents the height that the scroll bar needs to scroll, that is, the height of the internal p is 750px. And scrollTop indicates how much the current position of the scroll bar (a point) occupies in 750px, not the a marked in the picture.

At this time, we were very impressed by the designers of Windows. The scroll bar design was so beautiful that it deceived many simple-minded mouse operators. The distances between a and b respectively identify the distance the scroll bar has been scrolled and the distance that needs to be scrolled. There is a corresponding relationship between them, but these are not considered by programmers like us who develop applications. They are programs that design the GUI graphical interface of the operating system. members considered.

2 Determine whether the vertical scroll bar has reached the bottom

After clarifying the above concepts, the coding is actually relatively simple. The following is a sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8">
   <title>下拉滚动条滚到底部了吗？</title>
   <script language="JavaScript" src="jQuery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js"></script>
   <script language="javascript">
   $(document).ready(function (){
    var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
    var nScrollTop = 0;  //滚动到的当前位置
    var nDivHight = $("#div1").height();
 
    $("#div1").scroll(function(){
     nScrollHight = $(this)[0].scrollHeight;
     nScrollTop = $(this)[0].scrollTop;
     if(nScrollTop + nDivHight >= nScrollHight)
      alert("滚动条到底部了");
     });
   });
   </script>
  <body>
  <div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
   <div style="background-color:#ccc; height:750px;">IE 和 FF 下测试通过</div>
  </div>
  </body>
  </html>

Code explanation:

The height of the inner div is 750 and the height of the outer div is 500, so the vertical scroll bar needs to scroll 750-500=250 distance, it will reach the bottom, see the statement nScrollTop + nDivHight >= nScrollHight.

In the program, detecting and executing if judgment statements in the scroll event of the external div consumes a lot of CPU resources. Use the mouse to drag the scroll bar, and this event will be triggered as long as there is a change of one pixel. But by clicking on the arrows at both ends of the scroll bar, the event will be triggered much less frequently. Therefore, the scroll event of the scroll bar should be used with caution.

This example judges the situation when there is no horizontal scroll bar. When there is a horizontal scroll bar, the situation will change slightly, so in the nScrollTop + nDivHight >= nScrollHight statement, you need to use ">=" Comparison operator, and when there is no horizontal scroll bar, the equal sign "=" is sufficient. You can actually test it. You can also determine whether the horizontal scroll bar has scrolled to the end.

The above is a method written in jquery to determine whether the div scroll bar reaches the bottom [Recommended]_jquery content. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of JavaScript function curryingNext article：Detailed explanation of JavaScript function currying

See more

A method written in jquery to determine whether the div scroll bar has reached the bottom [recommended]_jquery

Related articles