html窗口(window)高度、文档(document)高度介绍

今天在做滚动条监听进行分页实例时候,忽然发现html窗口(window)高度、文档(document)高度不太懂,后来通过日志打印观察各个高度才知道,现在分享经验:

窗口<$(window).height()>高度: 你的屏幕高度（你在屏幕上能看到的视角高度),而文档document<$(document).height()>高度就是你整个页面所有dom高度，因为有的页面高度太高不能再窗口中全部显示 这时候我们就需要上下滚动页面查看所有网页内容那么我们从顶端开始一直滚到到最低端 这段距离就是文档高度<$(document).height()>,下面贴出滚动条监听js代码：

$(function(){

    $("#footer").hide();

    $(window).scroll(function () {
       //$(window).scrollTop()这个方法是当前滚动条滚动的距离
       //$(window).height()获取当前窗体的高度
       //$(document).height()获取当前文档的高度
       var bot = 40; //bot是底部距离的高度
       console.log("$(window).scrollTop():"+$(window).scrollTop());
       console.log("$(document).height():"+$(document).height());
       console.log("$(window).height():"  +$(window).height());
       if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
          //当底部基本距离+滚动的高度〉=文档的高度-窗体的高度时；
           //我们需要去异步加载数据了
          console.log("此时加载数据");  
       }
   });

    });