获取浏览器窗口大小

涉及到浏览器窗口的 api 很多,长得也比较像,每次写都要去网上查一下对应的 api,这里做个整理。

window.innerHeight:获取浏览器视觉窗口的高度。
window.outerHeight:获取浏览器窗口外部的高度。整个浏览器软件的高度,从关闭按钮那里开始,到下面可以拉伸的边框。
window.screen.Height:获取屏幕理想视窗高度,固定的数值,由 设备分辨率/设备像素比 得到。
window.screen.availHeight:浏览器窗口可用高度。
document.documentElement.clientHeihgt:获取浏览器布局视口高度,包括内边距,不包括垂直滚动条、边框和外边距。
document.documentElement.offsetHeight:包括内、外边距、滚动条和边框。
document.documentElement.scrollHeight:所有内容的高度。
document.documentElement.scrollTop:浏览器滚动的高度,IE 和 FF。
document.body.scrollTop:浏览器滚动的高度,Chrome。
document.documentElement.scrollTopdocument.body.scrollTop始终有一个为0,所以可以用这两个的和来求scrollTop

判断滚动条是否滚动到页面最底部

window.onscroll  = function (){
    var marginBot = 0;
    if (document.compatMode === "CSS1Compat"){
        marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop+document.body.scrollTop)-  document.documentElement.clientHeight;
    } else {
        marginBot = document.body.scrollHeight - document.body.scrollTop - document.body.clientHeight;
    }
    if(marginBot<=0) {
        //do something
    }
}

document.compatMode 用来判断当前浏览器采用的渲染方式,BackCompat 是标准兼容模式关闭,CSS1Compat 是标准兼容模式开启。

获取各种高度,jquery 里面就相对简单一点了
$(window).height():浏览器窗口可视区域高度。
$(document).height():当前文档的高度。
$(document.body).height():当前文档body的可视高度。
$(document.body).outerHeight(true):当前文档body的总高度,包括border、padding、margin。
$(document).scrollTop():获取滚动条到顶部的垂直高度。

发表评论

电子邮件地址不会被公开。 必填项已用*标注