Div滾動條 - 任何樣式的方式？

Question

無論如何要控制div標籤的滾動條的樣式嗎？我遇到了IE7和FireFox 3.5.2之間的一些對比問題。任何幫助將不勝感激！

Answer 1

使用javascript可以設置滾動條的樣式。在IE和FF中都可以正常工作。下面

檢查鏈接

From Twinhelix ， Example 2 ， Example 3 [或]你可以通過點擊下面的鏈接 30 scrolling techniques

Answer 2

不，你不能在Firefox，Safari等等你可以在Internet Explorer中。有幾個腳本可以讓你創建一個滾動條。

Answer 3

This one does well its scrolling job找到一些30型渦旋式風格類型。這很容易理解，只有幾行代碼，寫得很好，而且完全可讀。

Answer 4

還有iScroll項目，它允許您設置滾動條的樣式並使其與觸摸設備配合使用。 http://cubiq.org/iscroll-4

Answer 5

查看網頁我發現了一些簡單的樣式滾動條的方法。

這是這個傢伙！ http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task

在這裏我的實現！ https://dl.dropbox.com/u/1471066/cloudBI/cssScrollbars.png

/* Turn on a 13x13 scrollbar */ 
::-webkit-scrollbar { 
    width: 10px; 
    height: 13px; 
} 

::-webkit-scrollbar-button:vertical { 
    background-color: silver; 
    border: 1px solid gray; 
} 

/* Turn on single button up on top, and down on bottom */ 
::-webkit-scrollbar-button:start:decrement, 
::-webkit-scrollbar-button:end:increment { 
    display: block; 
} 

/* Turn off the down area up on top, and up area on bottom */ 
::-webkit-scrollbar-button:vertical:start:increment, 
::-webkit-scrollbar-button:vertical:end:decrement { 
    display: none; 
} 

/* Place The scroll down button at the bottom */ 
::-webkit-scrollbar-button:vertical:increment { 
    display: none; 
} 

/* Place The scroll up button at the up */ 
::-webkit-scrollbar-button:vertical:decrement { 
    display: none; 
} 

/* Place The scroll down button at the bottom */ 
::-webkit-scrollbar-button:horizontal:increment { 
    display: none; 
} 

/* Place The scroll up button at the up */ 
::-webkit-scrollbar-button:horizontal:decrement { 
    display: none; 
} 

::-webkit-scrollbar-track:vertical { 
    background-color: blue; 
    border: 1px dashed pink; 
} 

/* Top area above thumb and below up button */ 
::-webkit-scrollbar-track-piece:vertical:start { 
    border: 0px; 
} 

/* Bottom area below thumb and down button */ 
::-webkit-scrollbar-track-piece:vertical:end { 
    border: 0px; 
} 

/* Track below and above */ 
::-webkit-scrollbar-track-piece { 
    background-color: silver; 
} 

/* The thumb itself */ 
::-webkit-scrollbar-thumb:vertical { 
    height: 50px; 
    background-color: gray; 
} 

/* The thumb itself */ 
::-webkit-scrollbar-thumb:horizontal { 
    height: 50px; 
    background-color: gray; 
} 

/* Corner */ 
::-webkit-scrollbar-corner:vertical { 
    background-color: black; 
} 

/* Resizer */ 
::-webkit-scrollbar-resizer:vertical { 
    background-color: gray; 
}