实现div内滚动到底部进行加载

上节讲到如何判断是否滚动到页面的底部,然后进行一系列的操作,这节讲下如何在一个div中一直滚动加载,先来看下下面一段代码:

<!DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div滚动到底部加载</title>
</head>
<style>
    .scrollDiv{
        width: 500px;
        height: 400px;
        margin: 10px auto;
        background-color: #ff0000;
        overflow-y: scroll;
        padding: 10px;
    }
</style>
<body>
    <div class="scrollDiv" id="testDiv">
        <br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/>
    </div>
</body>
<script>
    var divscroll = document.getElementById('testDiv');
    function divScroll() {
        var wholeHeight = divscroll.scrollHeight;
        var scrollTop = divscroll.scrollTop;
        var divHeight = divscroll.clientHeight;
        if(scrollTop + divHeight >= wholeHeight){
            alert('滚动到底部了!');  
            //这里写动态加载的逻辑,比如Ajax请求后端返回下一个页面的内容
        }
        if(scrollTop == 0){
            alert('滚动到头部了!');
        }
    }
    divscroll.onscroll = divScroll;
</script>
</html>

仔细看的话,其实和判断网页是否滚动到底部是一个道理。

Paste_Image.png

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 157,709评论 24 688
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,106评论 1 91
  • 学号:2017101127 姓名:冯宁 性别:女 城市:山西运城 简书号:127冯宁 擅长:英语字体,羽毛球发球 ...
    127冯宁阅读 112评论 1 0
  • 点击下面相应文章标题,即可进入文章: 1、吴晓波给女儿的一封信:请把生命浪费在美好的事物上 2、一个麻省理工学院毕...
    若有小德阅读 117评论 0 0
  • 禅意 一切皆禅也,一切皆佛法也,贪淫致老,瞋恚致病,愚痴致死,除三得道。《法句经》释义:贪婪淫乱使人衰老,愤怒使人...
    淡定之龍的傳人阅读 101评论 0 0