横向滑动页面，导航条滑动居中的 js 实现思路

最近在做新闻咨询页的项目，各个新闻频道通过横向滑动切换，顶部的导航active栏需要跟着切换到对应频道，并且active到达中部时，要一直处在中间。 类似效果就是uc浏览器《UC头条》的导航栏滑动居中一样。

写出来挺有成就感的，做个记录。使用的框架是vue， 但思路无关框架。

首先看html的结构，

<ul>
      <li class='active'>娱乐</li>
      <li>要闻</li>
      <li>体育</li>
</ul>

 

目的是需要动态设置ul的位置，可以设置绝对定位调整left值，也可以用css3的translateX

那首先需要拿到active 对应li 标签的位置， 实现的关键是这2个方法

offsetLeft  获取当前元素相对于父元素的left值

getBoundingClientRect() 获取当前元素相对于视口（viewport）的位置,宽高等属性。

 

首先需要获得  居中的位置 = （window.innerWidth - li的宽度 ） / 2;

公式： ul目标位置 = li相对于父元素的left值 -  居中的位置。  

          let li = document.querySelector('.active');
          let ul = document.querySelector('ul');
          let window_offsetWidth = window.innerWidth; //屏幕宽度;
          if (dom) {
            let domoffsetWidth = dom.offsetLeft,
              //中间值 =( 屏幕宽度 - li宽度 ) / 2;
              diffWidth = (window_offsetWidth - dom.getBoundingClientRect().width) / 2,
              //目标值 = offset - 中间值
              targetOffset = -(domoffsetWidth - diffWidth);
            let ul_width = ul.getBoundingClientRect().width;//开始
            if (-targetOffset < 0) {
              ul.style.left = '0px';
              return;
            }
            //末尾
            if(targetOffset <  window_offsetWidth - ul_width ){
              ul.style.left = window_offsetWidth - ul_width + "px"
              return;
            }
            //正常
            ul.style.left = targetOffset + 'px';

 

以上代码，每次active切换的时候都需要执行，计算一次。我这里用vue的 watch 事件监听active绑定变量的变化来实现的