美文网首页
js滚动条底部自动加载

js滚动条底部自动加载

作者: 开车去环游世界 | 来源:发表于2018-06-03 20:41 被阅读17次

js 代码

$(function(){
    var totalHeight = 0; //定义一个总高度变量
    function ata(){ //loa动态加载数据
        totalHeight =  parseFloat( $(window).height() ) +  parseFloat( $(window).scrollTop() ); //浏览器的高度加上滚动条的高度
        if( $(document).height() <= totalHeight ) { //当文档的高度小于或者等于总的高度时,开始动态加载数据
            $("#container").append("<p>我是新加载出来的数据</p>"); //加载数据
        }
    }
    $(window).scroll(function(){
        console.log( "滚动条到顶部的垂直高度:" +  $(window).scrollTop()  );
        console.log( "页面的文档高度:" +  $(document).height()  );
        console.log( "浏览器的高度:" +  $(window).height()  );
        ata();
    });
});

html 代码

<body>
    <div id="pa">
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>4</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
    </div>
    <div id="container"></div> //加载数据的位置
</body>

相关文章

网友评论

      本文标题:js滚动条底部自动加载

      本文链接:https://www.haomeiwen.com/subject/bmkssftx.html