滾動聯動 單獨滾動與文件滾動

2022-02-22 07:49:51 字數 1363 閱讀 4830

我們的需求是做乙個文件的頁面,需要有標題與內容區。左邊的標題需要根據內容區來滾動,內容區滾動也需要左邊標題區的高亮。這些都是普通文件需要的。

文件標題比較多的時候還需要的是標題區的滾動,標題區滾動是因為當標題過多需要有滾動條,內容區的滾動需要把左邊標題區的高亮展示出來。

效果看 dp.bytedance.com,大家手動把瀏覽器縮小,把左邊標題區的滾動條開啟

我們做的是滾動到某處,選擇對應的標題高亮,我們的事件繫結在window.onscroll。問題是我們只滾動左側標題欄,沒有問題,但是當標題欄滾動到最頂或者最後,就開始滾動文件。文件滾動則會帶動左側標題欄的滾動,如果你一直不停的滾動標題欄,就會發現,標題欄的滾動條會亂竄。如下圖,如果標題欄再往上滾動,滾動條的位置會被程式改變。

如圖2,左側的標題欄是是fiexd,footer是absolute的,footer會覆蓋一部分標題欄,或者設定標題欄bottom高一些,不過顯得難看。

我們的思路是當在左側導航欄滾動的時候只執行高亮,不做跟隨。我們原來的方案是在window的scroll事件上面監聽,然後發現這是不行的,無法區分滾動的位置是什麼。如何區分滾動的位置是重點。

後來發現scroll事件並不能滿足我們的需求,控制scroll的事件,我們著眼於mousewheel事件,由於本站是pc站,我們只需要操作這個事件就可以。

document.addeventlistener("mousewheel",function(e:any))
我們可以知道在何處觸發的滾動。

還有個小操作就是我們知道e.target的dom是不是左邊欄。於是我們需要追溯到他們的祖宗元素:

let target = e.target;

let leftdom = document.queryselector('.scrollhandle');

while(target != document.body )

}

第二個問題我們的解決方案是當頁面滾動到底部,我們動態改變左邊欄的bottom值。

const el:any = doc.queryselector(".scrollhandle");

if(doc.scrolltop+doc.clientheight >= doc.scrollheight-60)else

dp.bytedance.com是angular2+ts的新嚐

css實現橫向滾動與縱向滾動

橫向滾動與縱向滾動實現的原理相同,即 用div包裹著內容,然後給這個div設定豎向overflow auto 注 橫向滾動需要設定具體的寬度,縱向滾動需要設定具體的高度,否則的話就不能實現 html如下 class home content left class selectindex index?...

ListView滾動翻頁 滾動載入

關鍵 1.滾動載入 listview.setonscrolllistener new onscrolllistener override public voidonscroll abslistview view,int firstvisibleitem,intvisibleitemcount,int...

Qt QLabel 文字滾動 滾動字幕

1.實現效果 做了兩種實現方式,畫素滾動比較順滑。支援qlabel樣式表設定字型顏色邊框等。支援實時縮放。2.簡述 實現思路1 準備足夠顯示滿寬的字元,每次刪除最左邊的乙個字元,不夠顯示的時候,在後邊追加字元。實現思路2 畫乙個寬度是label寬度 文字寬度的文字框,從x 0開始,每次將文字框的起始...