我们在写页面的时候经常会遇到判断是否滚动也页底的情况，比如在我的上一篇博客中的瀑布流插件的实现中就需要滑动到页底加载下一页的功能。这是大家会不会很头晕，clientTop，offsetTop，scrollTop这些怎么使用？

先google之，拿到两张图


大概有一定了解

自己写个demo检验一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		#container{
			height:200px; 
			width:200px; 		
			border:5px solid blue;
			padding:10px;
			margin:10px;
		}
		#content{
			height:100%;
			padding:8px;
			border:4px solid red;
			overflow:auto;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="content">
			<div id="text">
			测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试
			</div>
		</div>
	</div>
	<script>
		var text = document.querySelector('#text');
		console.log(text.offsetHeight);		//chrome下540
		console.log(text.offsetWidth);		//chrome下159
		var content = document.querySelector('#content');
		console.log(content.offsetHeight);	//chrome下224(100%=>200px; 200+8+8+4+4)
		console.log(content.offsetWidth);	//chrome下200(container中设置width为200,实际就是contentbox为200，这里自动占满了父级宽度，也是200)
		console.log(content.clientHeight);	//chrome下216(200+8+8);
		console.log(content.clientWidth);	//chrome下175(clientWidth和clientHeight不包括margin，border和滚动条宽度，包括padding宽度，这里如果没有滚动条就应该是200-4-4)
		console.log(content.clientTop);		//chrome下4(content的border-top宽度)
		console.log(content.clientLeft);	//chrome下4(content的border-left宽度)
		console.log(content.scrollHeight);	//chrome下556(540+8+8),可见scrollHeight是内部元素的高度+padding的高度
		console.log(content.scrollWidth);	//chrome下175(没有横向滚动条)
		console.log(content.scrollTop);		//chrome下0-340
	<script>
</body>
</html>

有如下结论:

  1. 注意content的scrollTop在变化，而text的scrollTop一直为0. 可想而知。content.clientHeight + content.scrollTop == content.scrollHeight到达底部(216 + 340 = 556);
    可以发现这也是为什么scrollHeight和clientHeight都包含padding高度的原因，因为这样才能相互抵消。计算正确。
  2. 引用stackoverflow的一段话
    clientHeight:
    Returns the height of the visible area for an object, in pixels. The value contains the height with the padding, but it does not include the scrollBar, border, and the margin.
    offsetHeight:
    Returns the height of the visible area for an object, in pixels. The value contains the height with the padding, scrollBar, and the border, but does not include the margin.
    So, offsetHeight includes scrollbar and border, clientHeight doesn’t.
    大意就是：offsetHeight包括scrollbar和border的高度，clientHeight则不包括两者； 它们都不包括margin的高度；

结论大致与上面的两个图一致，浏览器兼容性未测试，后续遇到实际问题总结

效果图如下：