vue 动态获取剩余区域的滚动高度

需求：通过获取屏幕的高度，减去【固定】高度，剩下的高度为【内容】滚动高度。

我们通过下面代码获取屏幕高度：

document.documentElement.clientHeight || document.body.clientHeight;

所谓的固定高度，应该是一直停留在屏幕可见范围中，不根据内容进行滚动。如果这个固定高度是一些静态资源时，我们只需通过设置 ref 获取元素的高度。

<div class="index-banner-img">
  <img :src="bannerImg" ref="imgSize" alt="">
</div>
let imgHeight = this.$refs['imgSize'].height

那么这样就很容易的获取到内容的滚动高度，代码如下：

getScollerHeight() {
  setTimeout(() => {
    let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    let imgHeight = this.$refs['imgSize'].height
    this.scrollHeight = (clientHeight - imgHeight) + 'px'
  }, 100)
}
mounted() {
  this.getScollerHeight()
},