判断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.validate使用攻略 第二部
Jul 01 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 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
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
javascript定时变换图片实例代码
2013/03/17 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
js脚本实现数据去重
2014/11/27 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
会议欢迎标语
2014/06/30 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
先进党支部事迹材料
2014/12/24 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
windows系统搭建WEB服务器详细教程
2022/08/05 Servers