在h5中实现水平滚动菜单

先上样式，每点击一个菜单项，让其在滚动到中间位置。

HTML：

    <div id="header" class="scroll-nav">
      <span v-for="(item,index) in wxTopicList"
            v-show="wxTopicList.length"
            @click="chooseSwipe(index)"//这边会触发navScroll()
            class="topic-name item"
            :class="{'active': index == activeIndex}">{{item.name}}
      </span>
      <span class="item" v-show="wxTopicList.length < functions.topicNum">
        <mu-icon id="add-topic" value="add" color="#fff" @click="goAddTopic"></mu-icon>
      </span>
    </div>

JS（核心在这儿）

navScroll() {
        //屏幕可视宽度的一半
        let listBoxHalfWidth = document.getElementById('header').clientWidth /2;
        //计算激活项中心至左侧内容的宽度（如果菜单项左右有margin，还需加上margin值的大小）
        let list = document.getElementsByClassName('item');
        let activeIndexLeftWidth = list[this.activeIndex].offsetWidth/2;
        for(let i=0;i<this.activeIndex;i++){
          activeIndexLeftWidth += list[i].offsetWidth;
        }
        //激活项的左侧内容宽度，小于屏幕宽度，则不移动滚动条
        if(listBoxHalfWidth > activeIndexLeftWidth) return;
        //移动滚动条大小为激活项及左侧内容宽度再减去一半的屏幕宽度。
        $('.scroll-nav').scrollLeft(activeIndexLeftWidth- listBoxHalfWidth);
      },

CSS： 

#header {
    height: 4.4rem;
    line-height: 4.4rem;
    background-color: #43B7C3;
    color: #B7EAF0;
    font-size: 1.6rem;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    white-space: nowrap;
  }
.topic-name {
    display: inline-block;
    padding: 0 1.5rem;
    min-width: 6rem;
    text-align: center;
  }
.topic-name.active {
    box-sizing: border-box;
    border-bottom: 4px solid #fff;
    height: 100%;
    color: #fff;
  }