多個自定義滾動條

所有我想知道的是，如果有可能在同一頁面上有多個自定義的-webkit-滾動條..我製作一些div具體的顏色，就像一個div有綠色文本和圖像，另一個藍色等。所以我想爲每個div製作一個自定義滾動條，使它與顏色匹配。多個自定義滾動條

Q1：有可能嗎？ Q2：如果是這樣，我該怎麼做？

我曾想過一種解決方案，但我認爲這有點麻煩。一個解決方案可能是讓每個div都包含一個iframe，然後用獨特的滾動條創建單獨的頁面，但我不知道這是否會起作用。

2013-03-10 Dimser

看這個問題 http://stackoverflow.com/questions/7743840/apply-webkit-scrollbar-style-to-specified-element – polybios 2013-03-10 17:53:01

當然，你可以 - 只是在前面加上滾動條的僞類與你預期的選擇，即：

::-webkit-scrollbar-track { 
    background-color: #333; 
} 

/* Override styles for <div>s, for example */ 
div::-webkit-scrollbar-track { 
    background-color: #b13131; 
}

我做了一個簡單的例子爲你在這裏 - http://jsfiddle.net/teddyrised/Nsz93/

來源

2013-03-10 18:03:10 Terry

謝謝..我完全忘了僞類。 – Dimser 2013-03-10 18:16:43

這是可能的使用jquery插件或只是樣式滾動條w/css。這可以在webkit和ie中完成。

::-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); 
}

http://jsfiddle.net/jeffpowrs/nEkPw/

http://css-tricks.com/custom-scrollbars-in-webkit/

來源

2013-03-10 17:52:36 Jeffpowrs

已經知道如何使自定義-webkit-scrollbar ..只是不知道如何使多個不同.. – Dimser 2013-03-10 18:19:07

也可以通過元素的id應用這些規則。假設一個div的滾動條必須是樣式的，其id爲「myDivId」。然後你可以做下面的事情。這樣，您可以對不同元素的滾動條使用不同的樣式。

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

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

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

http://jsfiddle.net/QcqBM/516/

來源

2014-12-18 06:04:48

多個自定義滾動條

回答

相關問題