隱藏瀏覽器預設滾動條和自定義滾動條樣式

2021-10-08 04:44:20 字數 864 閱讀 7995

chrome瀏覽器和移動端可以使用-webkit-scrollbar隱藏瀏覽器自帶的滾動條；

::-webkit-scrollbar
而火狐和ie可以通過給溢位的盒子巢狀乙個父盒子，設定溢位部分auto顯示，然後使其寬度增加17px（瀏覽器預設佔據內容的寬度為17px）然後給包裹內容的父盒子在設定overflow：hidden；隱藏溢位的滾動條部分；就可以將預設滾動條樣式不可見了。

原理如圖所示：

//css樣式//html結構


sss
自定義滾動條的實現原理：給設定overflow：auto的盒子繫結滾動事件；然後進行數學計算；然後設定拖拽滾動條設定對應的繫結事件，滾動條.onmousedown，document.onmousemove ，document.onmouseup三個事件計算出滾動條拖拽的距離；距離必須大於0；小於被滾動條滾動的最大距離；然後轉為內容被捲曲的高度；注意：此處內容被捲曲的高度，是對包裹內容的盒子進行操作，將它設定為相對定位，將捲曲的距離設定top值，即整個盒子相對於原來的位置向上移動；完成拖拽滾動的效果。

原理圖：

**實現：
bingo！！！完成嘻嘻嘻~~~

自定義瀏覽器滾動條樣式

webkit scrollbar 滾動條垂直方向的寬度與水平方向的高度 webkit scrollbar button 滾動條按鈕 webkit scrollbar track 滾動條軌道 webkit scrollbar track piece 滾動條垂直方向軌道件 webkit scrollba...

瀏覽器滾動條 自定義「衣裳」

我在電腦上開啟了一些瀏覽器，先觀察一下，其中ie瀏覽器版本 10 5 在我電腦上顯示是一致的，火狐版本為 59.0.2。如下圖 1 可見，除了火狐瀏覽器和opera瀏覽器的樣式與其他瀏覽器樣式差別較大，其餘樣式差別不大，主要是顏色的不同。不知道為什麼我放不上，唉 一 專屬ie的 衣裳 網上找到乙個不...

修改瀏覽器預設滾動條樣式 屬性自定義

滾動條各個屬性說明 webkit scrollbar 滾動條整體部分，其中的屬性有width,height,background,border等。webkit scrollbar thumb 滾動條裡面可以拖動的滑塊 webkit scrollbar track piece 內層軌道，需要注意的就是...