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

 更新时间:2017年02月08日 09:23:25   投稿:jingxian   我要评论
下面小编就为大家带来一篇滚动条的监听与内容随着滚动条动态加载的实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

实例如下:

<!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还有一些主流的浏览器基本都兼容,大家可以尝试下~~

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

相关文章

  • 学习RxJS之JavaScript框架Cycle.js

    学习RxJS之JavaScript框架Cycle.js

    这篇文章主要介绍了学习RxJS之JavaScript框架Cycle.js ,它是一个极简的JavaScript框架(核心部分加上注释125行),提供了一种函数式,响应式的人机交互接口,需要的朋友可以参考下
    2019-06-06
  • 使用InstantClick.js让页面提前加载200ms

    使用InstantClick.js让页面提前加载200ms

    本篇文章主要介绍了使用InstantClick.js让页面提前加载200ms,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JS弹出层单纯的绝对定位居中示例代码

    JS弹出层单纯的绝对定位居中示例代码

    这篇文章主要介绍了JS弹出层的绝对定位居中是如何实现的,需要的朋友可以参考下
    2014-02-02
  • Bootstrap-table使用footerFormatter做统计列功能

    Bootstrap-table使用footerFormatter做统计列功能

    大家在做表格的时候,经常会做统计功能,其实统计也并没想想的这么复杂,实现起来很简单,接下来通过通过本文给大家介绍Bootstrap-table使用footerFormatter做统计列功能,需要的朋友可以参考下
    2018-09-09
  • DVA框架统一处理所有页面的loading状态

    DVA框架统一处理所有页面的loading状态

    dva 有一个管理 effects 执行的 hook,并基于此封装了 dva-loading 插件。下面通过本文给大家分享DVA框架统一处理所有页面的loading状态,感兴趣的朋友一起看看吧
    2017-08-08
  • 原生JS和jQuery操作DOM对比总结

    原生JS和jQuery操作DOM对比总结

    这篇文章主要给大家介绍了原生JS和jQuery操作DOM的一些对比总结,文中总结了很多的对比,相信对大家的学习或者工作能带来一定的帮助,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-01-01
  • js实现时间轴自动排列效果

    js实现时间轴自动排列效果

    本文主要介绍了js实现新增加事件:时间轴自动排列效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JS改变页面颜色源码分享

    JS改变页面颜色源码分享

    本篇文章是JS的一个网页制作小技巧,应用在很多地方,通过JS改变HTML页面的颜色,有兴趣的学习下。
    2018-02-02
  • JavaScript 语言的递归编程

    JavaScript 语言的递归编程

    关于递归的解释见《SICP》第1章。下面是个简单的递归编程题目。
    2010-05-05
  • js 数据类型转换总结笔记

    js 数据类型转换总结笔记

    js 数据类型转换总结笔记,需要的朋友可以参考下。
    2011-01-01

最新评论