自定義我的網頁的滾動條

我正在建立一個網站，需要大量的定製，我也想定製希望滾動條的外觀（即：顏色，寬度，風格等）。我目前不知道該怎麼做。自定義我的網頁的滾動條

老實說，我正在進行一個組合項目鉻實驗，我還沒有嘗試過任何東西。任何解決方案，即使只有鉻，將有所幫助。

2012-12-05 DAViD

記住有這樣做沒有標準的方式，以及各種瀏覽器允許的各種定製滾動條顏色。 Chrome可能是我見過的最靈活的。 –

IE已經通過IE支持這一propriatary非標準CSS屬性，如：

scrollbar-base-color 
scrollbar-face-color 
scrollbar-track-color 
scrollbar-3dlight-color 
scrollbar-highlight-color 
scrollbar-arrow-color 
scrollbar-darkshadow-color 
scrollbar-shadow-color

的WebKit（Chrome和Safari）也support this使用：

::-webkit-scrollbar 
::-webkit-scrollbar-button 
::-webkit-scrollbar-track 
::-webkit-scrollbar-track-piece 
::-webkit-scrollbar-thumb 
::-webkit-scrollbar-corner 
::-webkit-resizer

什麼很酷約WebKit是滾動條可以有一個不透明的，這使得一些相當漂亮的用戶界面。

據我所知，沒有標準的Mozilla方式來支持它（儘管有一個open bug on this，所以我們希望！）但是，有一些jQuery plugins創建可滾動區域。您仍然不會在文檔窗口本身上獲得自定義滾動條顏色。

IE實例：

<html> 
<head> 
    <style> 
    BODY {scrollbar-base-color: #ff00ff;} 
    </style> 
</head> 
<body> 
    <div style="height: 5000px;"> 
    IE Test 
    </div> 
</body> 
</html>

WebKit的實例器（Chrome/Safari瀏覽器）：

<html> 
<head> 
    <style> 
    ::-webkit-scrollbar { 
     width: 12px; 
    } 

    ::-webkit-scrollbar-track { 
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,255,0.8); 
     border-radius: 10px; 
    } 

    ::-webkit-scrollbar-thumb { 
     border-radius: 10px; 
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,255,0.7); 
    } 
    </style> 
</head> 
<body> 
    <div style="height: 5000px;"> 
    WebKit Test 
    </div> 
</body> 
</html>

來源

2012-12-05 23:01:45

工作喜歡魔術@Mike。非常感謝。我很感激。 – DAViD

在Internet Explorer中，您可以在CSS中使用scrollbar-base-color來更改滾動條的顏色。

其他瀏覽器可能支持也可能不支持它，但它是非標準的。

對於所有其他瀏覽器，爲了影響諸如實際外觀（寬度，箭頭樣式等），您需要使用JavaScript編寫自己的滾動條，這是一個可用性的噩夢 - 不要這樣做！

來源

2012-12-05 22:52:07

自定義我的網頁的滾動條

回答

相關問題