tab导航栏横向滚动条-tabScroll

在vue中使用css实现的tab横向滚动条，效果如图：

tabScroll.png

<div class="activity-prizes-box" ref="activity-prizes-box">
      <div class="title">活动奖品</div>

      <div class="item-tab-box" v-if="mainData.activityDataPrizes && mainData.activityDataPrizes.length > 0" @scroll="handleTabScrollGet($event)">
        <div
              :class="{
                'item-tab': true,
                'item-tab-active': index === activeIndexTab,
              }"
              v-for="(item, index) in mainData.activityDataPrizes"
              :key="index"
              @click="handlePrizesTabClick(index)"
            >
              {{ item.activityPrizesName }}
        </div>
      </div>

      <div class="scroll-bar">
        <div
              class="progress-bar"
              :style="{
                transform: percent,
              }"
        ></div>
      </div>
      <div class="item-box" v-if="mainData.activityDataPrizes[activeIndexTab].prizes && mainData.activityDataPrizes[activeIndexTab].prizes.length > 0">
        <div class="item" v-for="(items, index) in mainData.activityDataPrizes[activeIndexTab].prizes" :key="index">
          <img :src="items.imageUrl" alt="" />
          <div class="title">{{ items.prizesName }}</div>
        </div>
      </div>
</div>

  .activity-prizes-box {
        width: 100%;
        overflow: hidden;
        background: url(~@/assets/images/activity/bg3.png) center/contain no-repeat;
        background-size: 100% 100%;
        padding: $center-padding-small;
        box-sizing: border-box;
        margin-top: $center-padding-small;
        .title {
          font-size: 0.32rem;
          font-weight: bold;
          color: #333333;
          margin: 0.3rem 0;
        }
        .item-tab-box {
          width: 100%;
          height: 0.8rem;
          display: flex;
          align-items: center;
          white-space: nowrap;
          overflow-y: hidden;
          overflow-x: scroll;
          &::-webkit-scrollbar {
            display: none;
          }
          .item-tab {
            font-size: 0.28rem;
            color: #b6b6b9;
            background-color: #fff;
            margin-right: 0.12rem;
            padding: 0.12rem;
            border-radius: 0.05rem;
          }
          .item-tab-active {
            font-size: 0.28rem;
            color: #fff;
            background-color: #f78d3e;
            margin-right: 0.12rem;
            padding: 0.12rem;
            border-radius: 0.05rem;
            position: relative;
          }
          .item-tab-active:after {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            display: block;
            border-width: 0.2rem;
            border-style: solid;
            border-color: #f78d3e transparent transparent transparent;
            left: 0;
            right: 0;
            margin: 0rem auto;
          }
        }
        .scroll-bar {
          width: 0.88rem;
          height: 0.06rem;
          background-color: #e8e8e8;
          border-radius: 0.03rem;
          margin: 0 auto;
          margin-top: 0.08rem;
          .progress-bar {
            width: 0.48rem;
            height: 0.06rem;
            background-color: #f78d3e;
            border-radius: 0.03rem;
          }
        }
        .item-box {
          margin-top: 0.2rem;
          .item {
            display: flex;
            align-items: center;
            padding: 0.12rem 0;
            img {
              width: 2rem;
              height: 1.2rem;
              object-fit: cover;
              border-radius: 0.24rem;
            }
            .title {
              font-size: 0.28rem;
              color: #333333;
              margin-left: 0.24rem;
            }
          }
          .item:not(:last-child) {
            border-bottom: 1px solid #f1f1f1;
          }
        }
      }

data() {
    return {
      activeIndexTab: 0,
      percent: 'translateX(0)',
      mainData: {
        activityClocks: [],
        activityDataPrizes: [
          {
            activityPrizesId: '',
            activityPrizesName: '',
            prizes: [
              {
                imageUrl: '',
                prizesId: '',
                prizesName: '',
              },
            ],
          },
        ],
        beginTime: '',
        endTime: '',
        imageUrl: '',
        coverUrl: '',
        completedTaskCount: '',
      },
    }
},
methods:{
    /**
    * tab滚动条
    * @param {*} e
    */
    handleTabScrollGet(e) {
      const _this = this;
      //  可划动的总宽度 = 元素实际的总宽度 - 元素页面上占的宽度
      let scrollWidth = e.target.scrollWidth - e.target.offsetWidth;
      //  划动百分比 = 划动的宽度 / 可划动的宽度
      let percent = e.target.scrollLeft / scrollWidth;
      _this.percent = 'translateX(' + percent * 100 + '%)';
    },
    /**
     * tab切换
     * @param {*} idx 当前tab的下标
     */
    handlePrizesTabClick(idx) {
      const _this = this;
      _this.activeIndexTab = idx;
    },
}