Home >Web Front-end >JS Tutorial >jQuery determines whether the scroll bar has scrolled to the bottom of the page script

jQuery determines whether the scroll bar has scrolled to the bottom of the page script

巴扎黑Original: 2017-06-29 09:41:331472browse

In fact, it is very simple. We only need to use the three parameters of clientHeight, offsetHeight, and scrollTop to determine our current position. Let me introduce an example to you.

Example, judge to the bottom

The code is as follows

$(window).scroll(function () {
    if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
        alert("哦哦,到底了.");
    }
});

If you want to pull to the bottomautomatically load the content. Just register a scroll bar event:

First, we pull the scroll bar from the top to the bottom. What changes is the value of scrollTop, and this value has a range.
This interval is: [0, (offsetHeight - clientHeight)]
That is, the change in the entire process of scroll bar pulling is within the range of 0 to (offsetHeight - clientHeight).

1. Determine whether the scroll bar has scrolled to the bottom: scrollTop == (offsetHeight – clientHeight)
2. When the scroll bar is within 50px from the bottom: (offsetHeight – clientHeight) – scrollTop 169ba71804b33ae326ae151cabb45216= 0.95

The code is as follows

scrollBottomTest =function(){
     $("#contain").scroll(function(){
         var $this =$(this),
         viewH =$(this).height(),//可见高度
         contentH =$(this).get(0).scrollHeight,//内容高度
         scrollTop =$(this).scrollTop();//滚动高度
        //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容
        if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容
        // 这里加载数据..
        }
     });
}

js judgment

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:

The code is as follows

<!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"></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 a distance of 750-500=250 to reach the bottom. See the statement nScrollTop + nDivHight >= nScrollHight.
In the program, detecting and executing the ifjudgment statement 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 when you click the arrows at both ends of the scroll bar, the event is 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 the detailed content of jQuery determines whether the scroll bar has scrolled to the bottom of the page script. For more information, please follow other related articles on the PHP Chinese website!

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：The perfect way to achieve page scrolling (Scroll) effect with jQueryNext article：The perfect way to achieve page scrolling (Scroll) effect with jQuery

See more

jQuery determines whether the scroll bar has scrolled to the bottom of the page script

Related articles