橫向滑動頁面,導航條滑動居中的 js 實現思路
阿新 • • 發佈:2018-02-09
let blog turn 頭條 2個 fse ret 咨詢 導航欄
最近在做新聞咨詢頁的項目,各個新聞頻道通過橫向滑動切換,頂部的導航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 實現思路