浏览器中的几个高度

浏览器中的几个高度

@(<前端开发>)[浏览器属性, 上拉加载]

document.body.cilentWidth;            // 网页可见区域(body)的宽度,整数像素值

document.body.clientHeight;            // 网页可见区域(body)的高度,整数像素值

document.body.offsetWidth;            // 网页可见区域(body)的宽度,包括border,margin等像素值

document.body.offsetHeight            // 网页可见区域(body)的高度,包括border,margin

document.body.scrollWidth            // 网页正文的宽度,包括有滚动条溢出的宽度

document.body.scrollHeigh            // 网页正文的高度,包括有滚动条溢出的高度 滚动条的滚动区域

var top = document.documentElement.scrollTop || document.body.scrollTop;

document.body.scrollLeft            //

window.screen.height;               //屏幕分辨率的高

window.screen.width;                //屏幕分辨率的宽

window.screen.availHeight;          //屏幕可用工作区的高

window.screen.availWidth;           //屏幕可用工作区的宽

测试

document.documentElement.scrollHeight        // 文档的高度 = $('html').height()

document.documentElement.scrollTop            // 滚动条顶部到文档顶部的距离 = $('html').scrollTop()

document.documentElement.clientHeight        // 客户端高度

滚动条到底部的时候关系:
clientHeight + scrollTop = scrollHeight

客户端高度    +   滚动上去的高度  =  可滚动高度(文档高度)

测试2

那么上拉加载的效果,

用户进入网页:

载入首批数据,文档高度( $('html').height() == 2500px

用户滚动 滚当条,当(监听滚动条的滚动状态)

document.documentElement.scrollTop + document.documentElement.clientHeight + 500 > document.documentElement.scrollHeight

,及用户可滚动剩下500px高度的时候,开始下一次的数据加载

当数据加载的时候,停止滚动条监听,滚动条的触发需要限制,比如触发后2s时间内不再触发。

反复如此,当数据加载完毕的时候,比对现有数据条数,与服务端返回的数据总数,如果相等,则加载完毕,那么清除 滚动条监听

那么一个简单的上拉加载数据页面就OK了~

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>上拉加载示例 - DYBOY</title>
    <style type="text/stylesheet">
        *{
            margin:0;
            padding:0;
            border:0;
        }
    </style>
</head>
<body>

<div class="gallary" style="width=500px;background-color:#666;"> </div>

<p class="tips" style="width:100%;text-align:center;">上拉加载...</p>

<div class="cover" style="background-color:red;z-index:999;position:fixed;width:100%;height:100vh;top:0;display:none;">
    <h1 style="color:#fff;">加载中...</h1>
</div>

<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script>
// 获取数据,追加到网页
function getImages(pageNum){
    $(".cover").show();
    $.get('https://api.top15.cn/picbed/piclist.php?page='+pageNum, function(data, status){
        if(data) {
            var data = JSON.parse(data);
            $.each(data.data, function(index, obj) {
                $('.gallary').append('<img src="'+obj[0]+'" style="height:300px;margin:15px;" title="'+ obj[1]+'" />');
            });
            $(".cover").hide();
        } else {
            $(".cover").hide();
        }
    });
}

$(function(){
    // 加载第一次的数据
    getImages(0);
    // 全局统计页数
    var PageNum = 1;
    var timer = null;

    // 监听滚动条变化
    $(window).scroll(function(){
        clearTimeout(timer);
        timer = setTimeout(function(){
            if(document.documentElement.scrollTop + document.documentElement.clientHeight + 500 > document.documentElement.scrollHeight ) {
                // 还有300px距离可滚动的时候触发
                if(PageNum >= 5) {
                    // 数据加载完毕
                    $('.tips').text('没有更多了~');
                    return;
                }else {
                    getImages(PageNum++);
                }
            }
        }, 1000);
    });
});
</script>
</body>
</html>
发表评论 / Comment

用心评论~