最近在做新聞諮詢頁的專案，各個新聞頻道通過橫向滑動切換，頂部的導航active欄需要跟著切換到對應頻道，並且active到達中部時，要一直處在中間。 類似效果就是uc瀏覽器《uc頭條》的導航欄滑動居中一樣。
寫出來挺有成就感的，做個記錄。使用的框架是vue， 但思路無關框架。
首先看html的結構，
目的是需要動態設定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)
//末尾
if(targetoffset < window_offsetwidth -ul_width )
//正常
ul.style.left = targetoffset + 'px';
以上**，每次active切換的時候都需要執行，計算一次。我這裡用vue的 watch 事件監聽active繫結變數的變化來實現的
橫向滾動條（滑動條）
asp.net的gridview本身不帶滾動條，可通過panel實現。但是windows自帶的橫向滾動條只支援顯示在下方，為了使用方便，需要在上下方都顯示橫向滾動條。查詢了很多方法，有些不能實現 被滾動內容的寬度未知，但使用這種方法必須已知 其它的不能完全相容這些瀏覽器 ie6，firefox，ch...
滑動條控制頁面內容
1 與之前所做的拖拽原理相似，只不過去掉了y方向的拖動。2 在關於滑塊在滑動條的位置確定時一定要記得不要被樣式居中給迷惑了位置，if l 0 else if l oparent.offsetwidth odiv offsetwidth 要按照正常的方式進行取值！3 關於比例取值，要按照滑塊移動的距離...
ios 橫向滾輪效果 ios橫向選單 頁面滑動
ios橫向選單 頁面滑動 檢視次數 9122 大小 11 b demo 橫向選單 頁面滑動 例子uiviewcontroller vc1 uiviewcontroller alloc init vc1.view setbackgroundcolor uicolor redcolor uiviewco...