在h5中实现水平滚动菜单

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

HTML：

    

      {{item.name}}
      
      
        
      
    

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 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;
  }