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

时间：2022-06-25 14:31:52 编辑：袖梨来源：一聚教程网

代码如下复制代码

 
  当滚动条滑到底部时自动加载内容

"Content-Type" content="text/html;charset=UTF-8"/>

  >

    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;

    }

"main">

"content">

"img">

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      14

      15

      16

      17

      18

      19

      20

      21

      22

      23

      24

      25

      26

      27

      28

      29

      30

 src="js/jquery-1.7.2.min.js">

>

  //获取列表中的原有内容

  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();

    }

  })

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程