WALL*E

<div class="nav-box" @scroll="scroll">
  <div for="list" class="nav">
    <div class="item-box">item</div>
  </div>
</div>
<div class="scroll-box" v-show="list.length/2 > 2">
  <div class="scroll" :style="'transform: translateX('+sX+')'"></div>
</div>

data() {
  return {
    sX: 0, //等比偏移量
    c_W: 0, //最外圍容器寬度
    s_b_W: 0, //自定義滾動條盒子寬度
    s_W: 0, //自定義滾動條移動盒子寬度
    list:[],
  };
},
methods: {
  scroll(e) {
    let {
      sX,
      s_b_W,
      s_W,
      c_W,
      list
    } = this.$data

    let nW = e.target.scrollWidth // 得到scroll-view的總寬度
    let nwl = nW / (list / 2) //得到單個item的寬度
    let itemCount = c_W/nwl //得到顯示的item數量
    let l = (list - (itemCount * 2)) / 2 //算出隱藏了多少item
    let nX = e.target.scrollLeft // 得到滑動的偏移量
    let sW = s_b_W - s_W + 2 //總寬度減去滑塊的寬度，得出剩下的寬度，+2是為了去掉
    sX = sW / ((nwl * l) / nX) / 2 + 'px' // 最終得出等比偏移量
    this.sX = sX
  },
},
mounted() {
  this.c_W = document.getElementByClassName('nav-box')[0].offsetWidth
  this.s_b_W =  document.getElementByClassName('scroll-box')[0].offsetWidth
  this.s_W = document.getElementByClassName('scroll')[0].offsetWidth
}

.nav-box{
  overflow-x: scroll;
}
.nav{
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 1fr);
}
.item-box{
  width:81px;
}
.scroll-box {
  width: 70rpx;
  height: 10rpx;
  background: #f5e6e6;
  border-radius: 5rpx;
  margin: 24rpx auto 0;
}
.scroll {
  width: 30rpx;
  height: 100%;
  background: #efab67;
  border-radius: 5rpx;
}

效果展示：