实时动态滚动判断距离显示顶部栏不闪烁

问题

在一开始做实时滚动条顶部滚动对时候然后使用,在tabContainerDom滚动到距离顶部一段距离的时候显示headerFixed

<div ref="headerFixed"  class="header-fixed" :class="{'show': showFixedBlock}"></div>

.header-fixed {
    opacity: 0;
    position: fixed;
    z-index: 99;
    top: 0;
    width: 100%;
    height: rem(52);
    background-color: #fff;
    box-sizing: content-box;
    &.show {
        opacity: 1;
    }
}

高度判断

document.addEventListener('scroll', Util.throttle(() => {
        let tabContainerDom = this.$refs.tabContainer;
      let headerFixedHeight = this.$refs.headerFixed.getBoundingClientRect().height;
          if (offsetTop <= headerFixedHeight) {
              this.showFixedBlock = true;
          }
          else {
              this.showFixedBlock = false;
          }
      }), 20);

这样写页面顶部的在滑动的时候会一直闪

解决办法

this.$refs.headerFixed.offsetHeight;

使用offsetHeight获取高度他就好了。这样页面就不闪了。

原因分析

基本是一样的，但是有tranfrom设置的是时候
getBoundingClientRect是动态计算的值，offsetHeight就是原本css设置的值
参考链接: ​​​JavaScript getBoundingClientRect() vs offsetHeight while calculate element height​​