编程 Javascript

判断div滑动到底部的scroll实例代码

Posted in Javascript onNovember 15, 2017

实例如下所示：

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

以上这篇判断div滑动到底部的scroll实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

- Author -

qq_27511945

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

首页图片漂浮效果示例代码

Jun 05 Javascript

javascript实现阻止iOS APP中的链接打开Safari浏览器

Jun 12 Javascript

js限制文本框的输入内容代码分享（3类）

Aug 20 Javascript

jquery实现未经美化的简洁TAB菜单效果

Aug 28 Javascript

Bootstrap滚动监听（Scrollspy）插件详解

Apr 26 Javascript

JavaScript Promise 用法

Jun 14 Javascript

js Canvas实现圆形时钟教程

Sep 19 Javascript

Webpack打包css后z-index被重新计算的解决方法

Jun 18 Javascript

示例vue 的keep-alive缓存功能的实现

Dec 13 Javascript

JS实现的杨辉三角【帕斯卡三角形】算法示例

Feb 26 Javascript

JS实现网站吸顶条

Jan 08 Javascript

JavaScript 闭包的使用场景

Sep 17 Javascript

Vue.js实现列表清单的操作方法

Nov 15 #Javascript

判断滚动条滑到底部触发事件(实例讲解)

Nov 15 #Javascript

手机注册发送验证码倒计时的简单实例

Nov 15 #Javascript

js导出Excel表格超出26位英文字符的解决方法ES6

Nov 15 #Javascript

bootstrap paginator分页插件的两种使用方式实例详解

Nov 14 #Javascript

JavaScript实现为事件句柄绑定监听函数的方法分析

Nov 14 #Javascript

JavaScript函数绑定用法实例分析

Nov 14 #Javascript