ezgif.com-optimize.gif

html結構

<div class="assort">
    <div class="topNav" id="topNav">
      <ul id="topNavUl">
        <li v-for="(i,index) in title" :key="index" @click="goCenter(i.guid,index,$event)" :class="{current: i.guid === currentTopNav}">{{ i.name }}</li>
      </ul>
    </div>
    <div>內容</div>
</div>

css樣式

.topNav {
    height: 41rem / $model;
    background: #fff;
    display: flex;
    flex-flow:row nowrap; 
    overflow: scroll;   
    ul {
      display: inline-block;        
      white-space: nowrap;      
      li {
        display: inline-block;
        line-height: 41rem / $model;
        font-size: $fontS1;
        padding: 0 10px;
        &:first-child {
        }
        &:last-child {
        }
        &.current {
          position: relative;
          color: #66cc66;
          &:after {
            content: '';
            height: 4px;
            width: 30%;
            border-radius: 10px;
            background-color: #66cc66;
            position: absolute;
            bottom: 0.15rem;
            right: 35%;
          }
        }
      }
    }
  }

JS邏輯

goCenter(guid, index, e) {
      let destination = index - 2;
      destination = destination < 0 ? 1 : destination;
      this.currentTopNav = guid;
      if (this.navScroll) {
        this.navScroll.scrollToElement(
          document.querySelector('#topNav li:nth-child(' + destination + ')')
        );
      }
      this.getdata();

      // 橫向滑動居中
      let ul = document.querySelector('#topNavUl');
      let nav = document.getElementById("topNav");
      let window_offsetWidth = window.innerWidth; //屏幕寬度;
      let dom = e.target;
      if (dom) {
        let domoffsetWidth = dom.offsetLeft,
          //中間值 =( 屏幕寬度 - li寬度 ) / 2;
          diffWidth = (window_offsetWidth - dom.offsetWidth) / 2,
          //目標值 = offset - 中間值
          targetOffset = -(domoffsetWidth - diffWidth);
        let ul_width = ul.getBoundingClientRect().width;//開始
        
        // 未超出中間值
        if (-targetOffset < 0) {
          nav.scrollLeft = 0;
          return;
        }
        //末尾
        if(targetOffset <  window_offsetWidth - ul_width ){
          nav.scrollLeft = -(window_offsetWidth - ul_width);
          return;
        }       
        //正常
        nav.scrollLeft = -targetOffset
      } 
    },