如何定義CSS滾動條樣式跨瀏覽器？我測試了這個代碼，它只適用於IE和Opera，但在Chrome，Safari和Firefox中失敗。CSS滾動條樣式跨瀏覽器
<style type="text/css">
<!--
body {
scrollbar-face-color: #000000;
scrollbar-shadow-color: #2D2C4D;
scrollbar-highlight-color:#7D7E94;
scrollbar-3dlight-color: #7D7E94;
scrollbar-darkshadow-color: #2D2C4D;
scrollbar-track-color: #7D7E94;
scrollbar-arrow-color: #C1C1D1;
}
-->
</style>
滾動條CSS樣式是微軟開發人員發明的一個奇怪的東西。它們不是CSS的W3C標準的一部分，因此大多數瀏覽器都忽略它們。
現在Webkit中也支持此功能。我認爲Opera也支持他們。所以事實上，截至2012年，瀏覽器市場份額70％似乎支持它（它是滾動條的樣式，它們仍然使用不同的語法來使得樣式完成）。 –
現在，2013年，Opera也正在轉向Webkit。真棒！ – Jimbo
請參閱http://stackoverflow.com/a/14150577/276648以獲得更多完整答案。 – user276648
jScrollPane是一個很好的解決方案，可跨瀏覽器滾動條並很好地降級。
截至IE6我相信你不能使用這些屬性自定義滾動條。上面鏈接的Chris Coyier文章詳細介紹了用於自定義滾動條的webkit專有css選項。
如果你真的想要一個可以完全定製的跨瀏覽器解決方案，你將不得不使用一些JS。下面是一個名爲FaceScroll的漂亮插件的鏈接：http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm
2013年真的有人還在編碼到IE6嗎？ – user2867288
@ user2867288 - 是的......是的。實際上，我爲一家小型網絡機構做了自由職業工作，他們將一些工作交給了我，並要求我將所有東西都做好。當時我終於放棄了整個機構作爲客戶，因爲它變得如此荒謬。失去了不錯的收入......但保持了我的理智。我不懷疑他們仍然需要在2016年的這一天。 –
這是作爲答案發布的，但它不會試圖回答這個問題。它應該可能是編輯，評論，另一個問題，或者完全刪除。 – cybermonkey
Webkit對滾動條的支持是quite sophisticated。此CSS給出了一個非常小的滾動條，具有淺灰色軌道和較暗的拇指：
::-webkit-scrollbar
{
width: 12px; /* for vertical scrollbars */
height: 12px; /* for horizontal scrollbars */
}
::-webkit-scrollbar-track
{
background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb
{
background: rgba(0, 0, 0, 0.5);
}
This answer是附加信息的奇妙源。
很酷。謝謝。 – clime
但是這在IE中不起作用 – user2886091
另請參閱：http://css-tricks.com/custom-scrollbars-in-webkit/ –
試試這個在IE和Safari和FF上使用和測試非常簡單，並且工作良好，旁邊不需要很多div只需加上id，它會在您連接Js和Css文件後正常工作。 FaceScroll Custom scrollbar
希望它幫助的
編輯 第1步：下面的腳本添加到您的網頁的部分：
<link href="general.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="facescroll.js"></script>
<script type="text/javascript">
jQuery(function(){ // on page DOM load
$('#demo1').alternateScroll();
$('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });
})
</script>
第2步：然後在你的頁面的正文中，添加在示例HTML塊下面到您的頁面。
<p><b>Scrollbar (default style) shows onMouseover</b></p>
<div id="demo1" style="width:300px; height:250px; padding:8px; background:lightyellow; border:1px solid gray; resize:both; overflow:scroll">
From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its
</div>
<br />
<p><b>Scrollbar (alternate style), always shown</b></p>
<div id="demo2" style="width:400px; height:130px; padding:10px; padding-right:8px; background:lightyellow; border:1px solid gray; overflow:scroll; resize:both;">
From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its
</div>
這是作爲答案發布的，但它不會嘗試回答問題。它應該可能是編輯，評論，另一個問題，或者完全刪除。 – cybermonkey
nanoScrollerJS是簡單地使用。我總是用他們...
Browser compatibility:
Mobile browsers support:
雖然這個鏈接可能回答這個問題，但最好在這裏包含答案的重要部分，並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 - [來自評論]（/ review/low-quality-posts/18166529） – muttonlamb
對於WebKit瀏覽器（Chrome/Safari），您可以使用以下代碼：http://stackoverflow.com/questions/7713599/styling-an-inner-scrollbar-like-the-twitter -conversation-interface/7713784＃7713784 – thirtydot
@graphicdivine，只有當他們改變整個主體的滾動條時纔會出現這種情況。還有很多其他滾動條可以修改（在網頁內），它與瀏覽器鑲邊無關。 – Dan
此鏈接顯示您必須在Webkit瀏覽器上執行此操作：http://css-tricks.com/custom-scrollbars-in-webkit/ – user1108509