vue中nav栏自动滚动的实现

Question

在用overflow-x做nav的滚动效果时，如何使被点击的nav项自动位移到指定位置

   <div class="wrap-menuNavNewProduct">
      <div class="homeTab" :class="`tabNum${tabNum}`" ref="homeTab"                         
       id="homeTab">
        <ul ref="tab" class="homeUl" >
          <li><router-link to="/index">首页</router-link></li>
          <li><router-link to="/news">nav1</router-link></li>
          <li><router-link to="/channel/123">nav2</router-link></li>
          <li><router-link to="/channel/234">nav3</router-link></li>
          <li><router-link to="/channel/345">nav4</router-link></li>
          <li><router-link to="/channel/456">nav5</router-link></li>
          <li><router-link to="/channel/567">nav6</router-link></li>
          <li><router-link to="/channel/789">nav7</router-link></li>
          <li><router-link to="/channel/890">nav8</router-link></li>
        </ul>
      </div>
</div>


.wrap-menuNavNewProduct
  position: relative;
  width 100%
  z-index: 1100;
  background: #fff;
  .homeTab
    margin: 0 auto;
    position: relative;
    min-width: 100%
    height: 4rem;
    overflow: hidden;
    //nav 横向滚动的实现
    overflow-x: scroll;
    &::-webkit-scrollbar {display:none}
    
    .homeUl
      height 4rem
      position: relative;
      overflow: hidden;
      line-height: 4rem;
      float: left;
      box-sizing: border-box

在此基础上该如何实现，点击一个nav项，次nav项自动位移到指定位置（比如说屏幕的中央）    
    
    
    

Answer 1

这个不就跟轮播图原理一样 写一个移动函数 然后把每次点击的index作为参数传进去

Answer 2

要是那么简单就不问了，
overflow-x: scroll;
&::-webkit-scrollbar {display:none}
这种滚动实现是用的浏览器本身的滚动行为，不是用transfrom也不是position，
我们自定义滚动的时候会用overflow：hidden把浏览器原生滚动条的禁掉，但这种方式正好相反
用transfrom也不是position会有冲突的

Answer 3

请问楼主解决了吗 我也遇到了同样的问题 请教一下

Answer 4

请问楼主这个问题解决了吗。我现在也遇到了