Detailed explanation of the scroll code that slides a div to the bottom-JS Tutorial-php.cn

Detailed explanation of the scroll code that slides a div to the bottom

小云云

Release： 2017-12-21 09:41:46

Original

2147 people have browsed it

scroll is also a very useful tag. This article will share with you a scroll example code for judging p to slide to the bottom. It has a good reference value and I hope it can help everyone.

The example is as follows:

<!DOCTYPE html>
<html>
<head>
  <title>判断p滑到底部的代码</title>
  <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
  <style type="text/css">
    #scrollTest{
      width:100px;
      height:100px;
      overflow-y: auto;//当p中y方向的内容溢出时，y轴分别显示滚动条
      border:1px solid red;
    }
  </style>
</head>
<body>
  <p id="scrollTest">
    <table>
      <tr>
        <td>111</td>
        <td>222</td>
      </tr>
      <tr>
        <td>111</td>
        <td>222</td>
      </tr>
      <tr>
        <td>111</td>
        <td>222</td>
      </tr>
      <tr>
        <td>111</td>
        <td>222</td>
      </tr>
      <tr>
        <td>111</td>
        <td>222</td>
      </tr>
      <tr>
        <td>111</td>
        <td>222</td>
      </tr>
      <tr>
        <td>111</td>
        <td>222</td>
      </tr>
    </table>
  </p>
</body>
</html>
<!--//事先得引入jQuery文件-->
<script type="text/javascript">
  $("#scrollTest").scroll(function(){
    var h = $(this).height();//p可视区域的高度
    var sh = $(this)[0].scrollHeight;//滚动的高度，$(this)指代jQuery对象，而$(this)[0]指代的是dom节点
    var st =$(this)[0].scrollTop;//滚动条的高度，即滚动条的当前位置到p顶部的距离
    if(h+st>=sh){
    //上面的代码是判断滚动条滑到底部的代码
      //alert("滑到底部了");
      $("#scrollTest").append(111+"<br>");//滚动条滑到底部时，只要继续滚动滚动条，就会触发这条代码.一直滑动滚动条，就一直执行这条代码。
    }
  })
</script>

Copy after login

Everyone should have a deeper understanding of scroll after reading this article If you know it, hurry up and give it a try.

Related recommendations:

Detailed explanation of the .scroll() function in jQuery

Detailed explanation of jQuery plug-in windowScroll usage code example

The perfect way to use jQuery to achieve the page scrolling effect

The above is the detailed content of Detailed explanation of the scroll code that slides a div to the bottom. For more information, please follow other related articles on the PHP Chinese website!