使用css chrome＆firefox的滾動樣式

是否可以使用css（僅）創建自定義樣式（背景顏色，滾動設計..等），這將在兩個瀏覽器（firefox & chrome）中都可見。使用css chrome＆firefox的滾動樣式

如果是。我們怎麼能......？

例如：我有一些CSS：請申請一些CSS

div.scroll { 
    background-color: #00FFFF; 
    width: 100px; 
    height: 100px; 
    overflow: scroll; 
}

來源

2016-03-02 Naveen D

所有的瀏覽器相同的輸出是否有任何溶液F或者那個..？ –

你能解釋一下嗎？ –

我有一個div有一些文本和滾動條（溢出：滾動給出）。我想改變滾動設計，滾動條的顏色。 –

這些僞元素本身。在

CSS的實際件

::-webkit-scrollbar    { /* 1 */ } 
    ::-webkit-scrollbar-button  { /* 2 */ } 
    ::-webkit-scrollbar-track  { /* 3 */ } 
    ::-webkit-scrollbar-track-piece { /* 4 */ } 
    ::-webkit-scrollbar-thumb  { /* 5 */ } 
    ::-webkit-scrollbar-corner  { /* 6 */ } 
    ::-webkit-resizer    { /* 7 */ }

不同狀態

這些都是僞類選擇。它們允許更詳細地選擇部件，例如滾動條處於不同狀態時。

CSS

:horizontal 
:vertical 
:decrement 
:increment 
:start 
:end 
:double-button 
:single-button 
:no-button 
:corner-present 
:window-inactive

：水平 - 水平僞類適用於任何滾動條有水平方向。

：vertical - 垂直僞類適用於垂直方向的任何滾動條。

：遞減 - 遞減僞類適用於按鈕和曲目段。它指示按鈕或軌道片段在使用時是否將遞減視圖的位置（例如，在垂直滾動條上，在水平滾動條上留下）。

：增量 - 增量僞類適用於按鈕和跟蹤條。它指示按鈕或曲目片段在使用時是否會增加視圖的位置（例如，在垂直滾動條上，在水平滾動條上的右邊）。

：start - 開始僞類適用於按鈕和軌跡段。它指示對象是否放在拇指之前。

：結束 - 結束僞類適用於按鈕和軌跡段。它指示對象是否放在拇指後面。

：double-button - 雙按鈕僞類適用於按鈕和軌跡段。它用於檢測按鈕是否位於滾動條同一端的一對按鈕的一部分。對於軌道部件，它指示軌道部件是否鄰接一對按鈕。

：單鍵 - 單按鈕僞類應用於按鈕和軌跡片段。它用於檢測按鈕本身是否在滾動條的末尾。對於軌道片段，它指示軌道片段是否鄰接單個按鈕。

：無按鈕 - 適用於跟蹤棋子並指示棋子是否跑到滾動條的邊緣，即軌道末端沒有按鈕。

：corner-present - 適用於所有滾動條，並指示滾動條角是否存在。

：無效窗口 - 適用於所有滾動條，並指示包含滾動條的窗口當前是否處於活動狀態。（在最近的夜晚，這個僞類現在也適用於::選擇，我們計劃擴展它以處理任何內容，並將其作爲新的標準僞類提出來。）

這裏我發表一個簡單的例子：

::-webkit-scrollbar { 
    width: 12px; 
} 

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

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

在其中我們會得到這樣一個簡單的分度，垂直四溢的文字：

您也可以使用jQuery click here

來源

2016-03-03 04:48:54

但這些僞類選擇器只能在Chrome中使用，不能在Firefox中使用。 –

回答更新.. –

使用css chrome＆firefox的滾動樣式

回答

相關問題