关于高度这个属性的小结

• 在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>