盒子模型的各种高度记录

  • height:返回元素内容的高度。(根据是不是怪异盒子模型计算高度)
  • offsetheight:它返回的高度是内容高+padding+边框。
  • clientHeight:在页面上返回内容的可视高度(不包括边框,外边距或滚动条)。
  • scrollHeight:返回整个元素的高度,即不设置高度时的,content高度+padding高度。其实就是展开后的clientHeight

盒子模型的各种高度记录_第1张图片
这个content设置100px,但是显示83,因为还有滚动条,滚动条宽度17px。
offsetheight:130 = 内容高100+padding20+边框10。
clientHeight:103 = 内容的可视高度83(即100px-滚动条17px)+ padding20。
scrollHeight:167 =147(内容真实高度)+padding20 = 167。

搞懂scroll (参考链接)

盒子模型的各种高度记录_第2张图片

scroll相关属性,其实它描述的是outer的属性:

#outer {
	margin: 100px 50px;
	height: 100px;
	width: 50px;
	padding: 10px 50px;
	overflow: scroll;
} 

<div id="outer">
        <div id="inner"></div>
</div>
<button onclick="toBottom(outer)">返回顶部</button>

//慢慢滚动到底部的实现
function toBottom(ele) {		
		if (ele.scrollTop < ele.scrollHeight - ele.clientHeight) {
			 setTimeout(function(){
					ele.scrollTop++;
					toBottom(ele);
				},100);
		}
}

比如这段代码,inner中间是长list列表,outer是容器,overflow设置为auto或者scroll。
通常觉得滚动是inner长list在往上移动,但是这是错误的,是outer的scrollTop的值在变化。要考虑的是outer的属性。

//判定元素是否滚动到底:
element.scrollHeight - element.scrollTop === element.clientHeight

//返回顶部
element.scrollTop = 0

浏览器尺寸

  • window.innerHeight:浏览器窗口的可见高度。包括了滚动条但是不包括border(该窗口的可见高度,如果下面打开开发者模式,这个高度缩小)
  • window.outHeight:计算整个浏览器的高度,包括标签页等等的整个浏览器高度,只有改变整个浏览器的高度才会变。
    这两个值是根据浏览器页面大小而变化的。

浏览器窗口的尺寸(就是内容部分,可以看见的部分,不包括工具栏和滚动条)
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

window.innerHeight - 浏览器窗口的可见高度 
window.innerWidth - 浏览器窗口的可见宽度 

对于 Internet Explorer 8、7、6、5:

document.documentElement.clientHeight 
document.documentElement.clientWidth 
或者 
document.body.clientHeight 
document.body.clientWidth 

兼容所有浏览器:

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 

你可能感兴趣的:(javascript,HTML+CSS)