阅读完文章才能点击按钮

<template>
  <div class="wrap">
      <div class="scroll-box" ref="scrollBox">
          <div class="agreement-padding agreement-box">
              <h3 class="protocol-title"><b>公开募集证券投资基金客户维护费揭示</b></h3>
              <p>您通过本机构持有本基金的整段投资期内，本机构最高向基金管理人收取管理费的50%作为客户维护费。</p>
              <p>客户维护费指基金管理人与基金销售机构通过基金销售协议约定，依据销售机构销售基金的保有量，从基金管理费中列支一定比例，用以向基金销售机构支付客户服务及销售活动中产生的相关费用。</p>
              <div class="height-50"></div>
          </div>
      </div>
      <div class="agreement-btn-box">
          <div class="agreement-btn" :class="{'agreement-eee': !finish}" @click="gotoBack()">{{finish ? '我已清楚知晓' : '请上滑完成阅读'}}</div>
      </div>
  </div>
</template>
<script>
  import "lodash"
  export default {
      props: {
          read: {
              type: Boolean
          }
      },
      data () {
          return {
              finish: false
          }
      },
      mounted () {
          this.finish = this.read;
          if(!this.read){
              this.scrollCalculate();
              this.debounceScroll = _.debounce(this.scrollCalculate, 500);
              this.$refs.scrollBox.addEventListener("scroll", this.debounceScroll);
          }
      },
      beforeDestroy() {
          this.removeScroll();
      },
      methods: {
          gotoBack () {
              if(this.finish){
                  this.buridTrack('基金协议告知点击同意')
                  this.$emit('gotoBack', 1)
              }
          },
          scrollCalculate(){
              let h = this.$refs.scrollBox.clientHeight, scrollH = this.$refs.scrollBox.scrollHeight;
              let top = this.$refs.scrollBox.scrollTop;
              if(h + top - scrollH >= -5){
                  this.finish = true; 
                  this.removeScroll();
              }
          },
          removeScroll(){
              this.$refs.scrollBox.removeEventListener("scroll", this.debounceScroll);
          },
      }
  }
</script>
<style lang="stylus" scoped>
  .height-50 {
        height: 50px;
    }

    table {
        width: 100%;
        background: #666666;
        text-align: center;
        font-size: 24px;
    }

    table td {
        background-color: white;
    }

    table th {
        background-color: white;
    }

    .wrap .agreement-eee {
        background-color: rgba(239, 46, 10, .29);
    }
    .wrap {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .agreement-btn-box {
        width: 100%;
        height: 1.2rem;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .scroll-box {   
        background-color: #ffffff;
        flex: 1;
        overflow-y: auto;
    }
    .agreement-box {
        position: relative;
        padding: 0.2rem 0.42rem;
        overflow: hidden;
        min-height: 100%;
    }
.agreement-box::before, .agreement-box::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 0.2rem;
    background-color: #f2f2f2;
}
.agreement-box::before {
    top: 0;
}
.agreement-box::after {
    bottom: 0;
}