子组件获取外层组件的scrollTop，达到实时定位的效果

子组件获取外层组件的scrollTop，达到实时定位的效果

需求其实很简单，下面这么设计主要是为了适配其他页面，都可以通过这样的形式拿到内容区域的scrollTop.

最右侧是左侧列表的每一个进度状态，点击左侧表格中的任意一个item，都需要联动对应的进度状态。
页面效果问题：
往下滑动鼠标滚轮，两侧同时向上移动，就看不到右侧的进度状态了。
这个时候需要拿到父级box向上移动了多少px，当然这个可以使用固定定位解决，但是一旦其他高度发生变化，可能会造成这里样式变化。

于是立马想到了eventBus：

main.js

Vue.prototype.$eventBus = new Vue()

home.js

        <div class="content" id="contextBox" v-if="isShowContext">
          <router-view></router-view>
          <el-backtop target=".content"></el-backtop>
        </div>

  created() {
   

    // 激活 失效 scroll事件
    this.$eventBus.$on('contentScroll', ({
    flag = false }) => {
   
      let contextBox = document.getElementById('contextBox')
      let that = this
      // 要执行的时间
      const handerFun = function (e) {
   
        // 这里可以对形参进行结构，对应条件 emit触发 对应的事件
        // 目前这里只是触发了一个 需要再加即可
        that.$eventBus.$emit('changeLeftBoxScrollTop', e && e.target && e.target.scrollTop)
      }
      if (flag) {
   
        // 激活
        contextBox.addEventListener('scroll', handerFun)
      } else {
   
        // 失效
        contextBox.removeEventListener('scroll', handerFun)
      }
    })
  }

使用父组件scrollTop数值的子组件：

      <div class="right">
        <div class="container containerTop" ref="scrollTopBox">
          <p class="titleP">进程状态</p>
          <vS
            direction="vertical"
            :active="activeSteps"
            :flagList="flagStepsList"
          />
          <div class="btnBox">
            <el-button type="warning" size="small">不通过</el-button>
            <el-button type="primary" size="small">通过</el-button>
          </div>
        </div>
      </div>

  destroyed() {
   
    this.$eventBus.$emit('contentScroll', {
    flag: false })
    this.$eventBus.$off('contentScroll')
    this.$eventBus.$off('changeLeftBoxScrollTop')
  },
  mounted() {
   
    this.$eventBus.$emit('contentScroll', {
    flag: true })
    this.$nextTick(() => {
   
      this.$eventBus.$on('changeLeftBoxScrollTop', (data) => {
   
          if (this.$refs['scrollTopBox'] && this.$refs['scrollTopBox'].style){
   
            this.$refs['scrollTopBox'].style.top = data && parseFloat(data) + 'px'
        }    
      })
    })
  },

父组件的监听不会自动执行，需要子组件触发，使用完子组件关闭即可。