如何在Firefox和IE中獲取自定義滾動條？

我使用的自定義滾動在Chrome中正常工作...但它不適用於Firefox或IE9。如何在Firefox和IE中獲取自定義滾動條？

這是CSS：

::-webkit-scrollbar { 
    width: 7px; 
    height: 1px; 
} 

::-webkit-scrollbar-thumb  
{ 
    height: 1em; 
    background: #ccc -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(240, 240, 240)), to(rgb(250, 250, 250))); 
    -webkit-border-radius: 5px; 
} 

::-webkit-scrollbar-button:end:increment { 
    background:url(../images/down.png) center no-repeat; 
} 

::-webkit-scrollbar-button:start:decrement 
{ 
    background:url(../images/up.png) center no-repeat; 
}

來源

2012-02-17 Beginner

@pacofvf：這正是他的要求。 – SLaks 2012-02-17 17:31:23

@SLaks如果你是對的，你應該編輯問題來提問。我不認爲OP知道這一點。我只是想把他指向正確的方向。 – 2012-02-17 17:38:15

你可以發佈你想要滾動條的樣子嗎？我看不到上面代碼中列出的圖像。 – 2012-02-25 00:23:51

這是一個專有WebKit的財產。 FF或IE沒有相應的功能。

你可以，但是，你要尋找的使用jQuery。

http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

編輯：唔..有字面上沒有Firefox的當量，問這個問題的字面必須要麼使用JavaScript的解決方案，或者沒有解決方案的人。 Downvotes不會改變這一點。

來源

2012-02-17 17:31:40

是這樣，這個插件只適用於固定高度的容器？ – Blake 2014-08-06 07:00:33

而Firefox目前還沒有一種方法來改變滾動條（見bug 77790爲有些相關的問題），Internet Explorer已經有自5.5版本（僅支持顏色）有限功能。欲瞭解更多信息，請閱讀MSDN's User Interface page。

注：的語法並不總是在IE改變滾動條的顏色相同，所以如果你正在尋找支持舊版本（我相信7下），你將不得不使用舊的語法以及。

來源

2012-02-17 17:40:24 0b10011

我總是驚訝一個前瞻性的瀏覽器IE實際上是什麼。當然，他們完全沒有這個標準，但他們在任何其他人面前都有旋轉，漸變，陰影和其他幾個整齊的特徵。 – 2012-02-17 17:43:34

@ChrisSobolewski - 因爲他們爲自己做事，而不是爲了網絡。其他瀏覽器當時並不存在，或者只是遵循標準。 – Rob 2012-02-17 18:12:13

大量使用的解決方案是http://jscrollpane.kelvinluck.com/ 它支持大多數市長瀏覽器。檢查基本示例：http://jscrollpane.kelvinluck.com/basic.html

來源

2012-02-23 15:42:00 Jaap

http://darsa.in/sly/這是非常輕量級的易於定製移動友好自定義滾動條。檢查這個例子http://darsa.in/sly/examples/vertical.html

來源

2013-12-24 19:55:56

我已經開發了custom scrollbar library named SimpleScrollbar。

它不依賴於任何其他庫/框架，它是小於1KB gzip和縮小後。

它採用原生滾動，所以沒有黑客，而且性能真棒。

你只需要在你的網頁庫，並在你想滾動任何DIV使用ss-container屬性。活生生的例子：

<link href="http://buzinas.github.io/simple-scrollbar/simple-scrollbar.css" rel="stylesheet"/> 
 
<div style="height: 180px; width: 200px; display: inline-block;" ss-container> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</div> 
 
<section style="height: 180px; width: 300px; display: inline-block;" ss-container> 
 
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> 
 
     <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p> 
 
</section> 
 
<!--[if IE 9]><script src="https://cdn.jsdelivr.net/classlist/2014.01.31/classList.min.js"></script><![endif]--> 
 
<script src="http://buzinas.github.io/simple-scrollbar/simple-scrollbar.min.js"></script>

它適用於所有現代瀏覽器（Firefox，鉻，歌劇，Safari瀏覽器，邊緣），並在IE10和IE11。你也可以在IE9中使用它，包括一個classList填充。

所有的Android，iOS和Windows Phone瀏覽器也不支持。

來源

2015-09-06 14:12:15 Buzinas

如何在Firefox和IE中獲取自定義滾動條？

回答

相關問題