- 在style或css样式中的 height:100px 指的是内容可视区的高度，不含内边距，不含border，不含外边距，而不是div的高度。
以下结论在 firefox、chrome、IE10+、QQ浏览器中都测试过，都是一致的：
clientHeight: 可理解为内部可视区高度，样式的height+上下padding
scrollHeight: 内容的实际高度+上下padding（如果没有限制div的height，即height是自适应的，一般是scrollHeight==clientHeight）
offsetHeight:可理解为div的可视高度，样式的height+上下padding+上下border-width。
height 这个变量在几个浏览器中都是undefined
style.height这个变量在本例中是'200px'，不过遗憾的是只有将高度定义在元素的style属性中这个变量才有效，如果是抽取到了样式表中是无法取到的。
clientTop: 容器内部相对于容器本身的top偏移，实际就是 上border-width
scrollTop: Y轴的滚动条没有，或滚到最上时，是0；y轴的滚动条滚到最下时是 scrollHeight-clientHeight（很好理解）
offsetTop: 可以理解为容器相对于document的top的绝对偏移。等于top+margin-top
滚动时通常我们只能scrollTop，当scrollTop为 0 到 scrollHeight-clientHeight 是正常的滚动距离，否则就是滚动过头了（手机上的上下拉取）！
<template>
<div>
<div style="height: 100px;padding:10px;border:2px solid green;width: 200px;overflow-y: scroll;" ref="mybox" id="mybox" @scroll="scrollFun">
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
},
mounted() {
this.scrollFun();
},
methods: {
scrollFun(){
console.log('-----')
console.log('clientHeight', this.$refs.mybox.clientHeight);
console.log('scrollHeight', this.$refs.mybox.scrollHeight);
console.log('offsetHeight', this.$refs.mybox.offsetHeight);
console.log('height ', this.$refs.mybox.height);
console.log('style.height ', this.$refs.mybox.style.height);
console.log('clientTop ', this.$refs.mybox.clientTop);
console.log('scrollTop ', this.$refs.mybox.scrollTop);
console.log('offsetTop ', this.$refs.mybox.offsetTop);
}
}
};
</script>
<style>
p {
margin: 0px;
height: 20px;
}
</style>
