CSS 如何在 Firefox 和 IE 中获得自定义滚动？

how to get a custom scroll in firefox and IE?

提问by Beginner

I am using a custom scroll which works fine in chrome...but it does not work in Firefox or IE9.

我正在使用在 chrome 中运行良好的自定义滚动......但它在 Firefox 或 IE9 中不起作用。

This is the CSS:

这是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;
}

回答by Chris Sobolewski

That is a proprietary webkit property. There is no equivalent for FF or IE.

这是一个专有的 webkit 属性。FF 或 IE 没有等效项。

You can, however, do what you're looking for with jQuery.

但是，您可以使用 jQuery 做您正在寻找的事情。

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

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

Edit:Uhhh.. there literally is no Firefox equivalent and the person asking the question literally must either use a javascript solution, or no solution at all. Downvotes won't change that.

编辑：呃 .. 字面上没有 Firefox 等价物，问这个问题的人必须要么使用 javascript 解决方案，要么根本没有解决方案。反对票不会改变这一点。

回答by 0b10011

While Firefox doesn't currently have a way to change scrollbars (see bug 77790for a somewhatrelated issue), Internet Explorer has had limitedfunctionality since version 5.5 (only supports colors). For more information, read more about it at MSDN's User Interface page.

虽然 Firefox 当前没有更改滚动条的方法（请参阅bug 77790以了解一些相关问题），但 Internet Explorer自 5.5 版（仅支持颜色）以来的功能有限。有关更多信息，请在MSDN 的用户界面页面阅读更多相关信息。

Note:The syntax has not always been the same for changing scrollbar colors in IE, so if you're looking to support older versions (I believe 7 and under), you will have to use the old syntax as well.

注意：在 IE 中更改滚动条颜色的语法并不总是相同，因此如果您希望支持旧版本（我相信 7 及以下），您也必须使用旧语法。

回答by Jaap

A much used solution is http://jscrollpane.kelvinluck.com/It supports most mayor browsers. Check the basic examples: http://jscrollpane.kelvinluck.com/basic.html

一个常用的解决方案是http://jscrollpane.kelvinluck.com/它支持大多数市长浏览器。检查基本示例：http: //jscrollpane.kelvinluck.com/basic.html

回答by Buzinas

I've developed a custom scrollbar library named SimpleScrollbar.

我开发了一个名为 SimpleScrollbar的自定义滚动条库。

It does not depend on any other library/framework, and it's less than 1KB after gzip and minification.

它不依赖于任何其他库/框架，并且在 gzip 和缩小后小于 1KB。

It uses the native scroll, so there are no hacks, and the performance is awesome.

它使用原生滚动，因此没有任何黑客攻击，而且性能非常棒。

---

---

You only need to include the library in your page, and use the ss-containerattribute in any div that you want to make scrollable. Live example:

您只需要在页面中包含该库，并ss-container在要使其可滚动的任何 div 中使用该属性。现场示例：

<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>

---

---

It works on all the modern browsers (Firefox, Chrome, Opera, Safari, Edge), and on IE10 and IE11. You can also use it in IE9 by including a classList polyfill.

它适用于所有现代浏览器（Firefox、Chrome、Opera、Safari、Edge）以及 IE10 和 IE11。您还可以通过包含 classList polyfill 在 IE9 中使用它。

All Android, iOS and Windows Phone browsers are supported either.

也支持所有 Android、iOS 和 Windows Phone 浏览器。

回答by stephanmg

It might be of interest: Firefox 64 contains now at least the scrollbar-width and scrollbar-color option for the track and thumb of the scrollbar, cf. release notes and bug tracker here: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109

可能会感兴趣：Firefox 64 现在至少包含滚动条的轨道和拇指的 scrollbar-width 和 scrollbar-color 选项，参见。在这里发布说明和错误跟踪器：https: //bugzilla.mozilla.org/show_bug.cgi?id=1460109

Best wishes, SG

最好的祝福，SG

回答by Sandro Adamia

http://darsa.in/sly/this is very lightweight easy to customize mobile friendly custom scrollbar. Check this example http://darsa.in/sly/examples/vertical.html

http://darsa.in/sly/这是一个非常轻量级的易于定制的移动友好定制滚动条。检查这个例子http://darsa.in/sly/examples/vertical.html