获取浏览器窗口大小

涉及到浏览器窗口的 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():获取滚动条到顶部的垂直高度。

发表评论

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