浏览器中的几个高度

Admin 2020-01-27 183人围观 ,发现0个评论 学习代码网站亮度

浏览器中的几个高度

浏览器中的几个高度 Web教程 第1张

document.body.cilentWidth;            // 网页可见区域(body)的宽度,整数像素值document.body.clientHeight;            // 网页可见区域(body)的高度,整数像素值document.body.offsetWidth;            // 网页可见区域(body)的宽度,包括border,margin等像素值document.body.offsetHeight            // 网页可见区域(body)的高度,包括border,margindocument.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;           //屏幕可用工作区的宽

浏览器中的几个高度 Web教程 第2张

document.documentElement.scrollHeight        // 文档的高度 = $('html').height()document.documentElement.scrollTop            // 滚动条顶部到文档顶部的距离 = $('html').scrollTop()document.documentElement.clientHeight        // 客户端高度滚动条到底部的时候关系:clientHeight + scrollTop = scrollHeight客户端高度    +   滚动上去的高度  =  可滚动高度(文档高度)

浏览器中的几个高度 Web教程 第3张

那么上拉加载的效果,

用户进入网页:

载入首批数据,文档高度( $('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>


请发表您的评论
请关注微信公众号
微信二维码
不容错过
Powered By 蚁人博客