滚动条的监听与内容随着滚动条动态加载的实现


Posted in Javascript onFebruary 08, 2017

实例如下:

<!DOCTYPE html>
<html>
<head>
  <title>当滚动条滑到底部时自动加载内容</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  <style type="text/css">
    body{
      background-color: #808080;
    }
    #main{
      margin:0 auto;
      width: 960px;
    }
    #content{
      position: absolute;
      width: 960px;
    }
    #img{
      margin: 0;
      padding: 0;
    }
    #img li{
      list-style-type: none;
      background-color: salmon;
      margin: 0;
      margin-top:10px;
      border-bottom: solid 1px hotpink;
      text-align: center;
    }
  </style>
</head>
<body>
<div id="main">
  <div id="content">
    <ul id="img">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
      <li>29</li>
      <li>30</li>
    </ul>
  </div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
  //获取列表中的原有内容
  var content=document.getElementById("img").innerHTML;
  //每被调用一次,就将网页原有内容添加一份,这个大家可以写自己要加载的内容或指令
  function addLi(){
    document.getElementById("img").innerHTML+=content;
  }
  /*
   * 监听滚动条,本来不想用jQuery但是发现js里面监听滚动条的事件不好添加,这边就引用了Jquery的$(obj).scroll();这个方法了
   */
  $(window).scroll(function(){
    //下面这句主要是获取网页的总高度,主要是考虑兼容性所以把Ie支持的documentElement也写了,这个方法至少支持IE8
    var htmlHeight=document.body.scrollHeight||document.documentElement.scrollHeight;
    //clientHeight是网页在浏览器中的可视高度,
    var clientHeight=document.body.clientHeight||document.documentElement.clientHeight;
    //scrollTop是浏览器滚动条的top位置,
    var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
    //通过判断滚动条的top位置与可视网页之和与整个网页的高度是否相等来决定是否加载内容;
    if(scrollTop+clientHeight==htmlHeight){
       addLi();
    }
  })
</script>
</body>
</html>

以上这个方法Ie8还有一些主流的浏览器基本都兼容,大家可以尝试下~~

以上这篇滚动条的监听与内容随着滚动条动态加载的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 #Javascript
setTimeout学习小结
Feb 08 #Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 #Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 #Javascript
用move.js库实现百叶窗特效
Feb 08 #Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 #Javascript
Move.js入门
Feb 08 #Javascript
You might like
非常重要的php正则表达式详解
2016/01/04 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
Javascript注入技巧
2007/06/22 Javascript
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
Pandas分组与排序的实现
2019/07/23 Python
python爬虫中多线程的使用详解
2019/09/23 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
表彰会主持词
2014/03/26 职场文书
经济管理专业求职信
2014/06/09 职场文书
投资意向协议书
2015/01/29 职场文书
升职自荐信怎么写
2015/03/05 职场文书
团干部培训班心得体会
2016/01/06 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
Python一些基本的图像操作和处理总结
2021/06/23 Python
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js