判断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 相关文章推荐
Javascript 闭包引起的IE内存泄露分析
May 23 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
javascript常用函数(1)
Nov 04 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 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 var_export与var_dump 输出的不同
2013/08/09 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
Javascript Math对象
2009/08/13 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
星球大战与Python之间的那些事
2016/01/07 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
Django 批量插入数据的实现方法
2020/01/12 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
numba提升python运行速度的实例方法
2021/01/25 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
护士自荐信
2013/10/25 职场文书
体育教育专业自荐信范文
2013/12/20 职场文书
美德少年事迹材料
2014/01/23 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript