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


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 相关文章推荐
Javascript中的delete介绍
Sep 02 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 Javascript
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
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
模拟select的代码
2011/10/19 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
js对象基础实例分析
2015/01/13 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
python实现图片批量压缩程序
2018/07/23 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
企业办公室主任岗位职责
2014/02/19 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
购房协议书
2014/04/11 职场文书
高三霸气励志标语
2014/06/24 职场文书
心得体会的写法
2014/09/05 职场文书
企业授权委托书范本
2014/09/22 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
openstack中的rpc远程调用的方法
2021/07/09 Python