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

作者：袖梨 2022-06-25
代码如下 复制代码

当滚动条滑到底部时自动加载内容
"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();
    }
    })


    相关文章

    精彩推荐