判断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实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于jQuery object and DOM element
Apr 15 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
DWR中各种java方法的调用
May 04 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
JS闭包的几种常见形式实例详解
Sep 16 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 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
You might like
PHP 命名空间实例说明
2011/01/27 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
Tornado 多进程实现分析详解
2018/01/12 Python
python使用tkinter实现简单计算器
2018/01/30 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
python and or用法详解
2019/06/26 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
附答案的Java面试题
2012/11/19 面试题
物流专业大学生求职信范文
2013/10/28 职场文书
网页设计个人找工作求职信
2013/11/28 职场文书
党员政治学习材料
2014/05/14 职场文书
技能比武方案
2014/05/21 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
解析目标检测之IoU
2021/06/26 Python
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
MySQL查询日期时间
2022/05/15 MySQL