橫向滑動頁面，導航條滑動居中的 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綁定變量的變化來實現的