最近在做新聞咨詢頁的項目，各個新聞頻道通過橫向滑動切換，頂部的導航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值 - 居中的位置。

 1           let li= document.querySelector(‘.active‘);
 2           let ul = document.querySelector(‘ul‘)
 
 3           let window_offsetWidth = window.innerWidth; //屏幕寬度;
 4           if (dom) {
 5              let lioffsetWidth = dom.offsetLeft,
 6               //中間值 =( 屏幕寬度 - li寬度 ) / 2;
 7               diffWidth = (window_offsetWidth - dom.getBoundingClientRect().width) / 2,
 8               //目標值 = offset - 中間值
 

 9               targetOffset = lioffsetWidth - diffWidth;
10            
11             if (targetOffset < 0) {
12               ul.style.left = ‘0px‘;
13               return;
14             }
15             ul.style.left = -targetOffset + ‘px‘  

以上代碼，每次active切換的時候都需要執行，計算一次。我這裏用vue的 watch 事件監聽active綁定變量的變化來實現的

橫向滑動頁面，導航條滑動居中的 js 實現思路