我正在为颜色自定义滚动条使用一个简单的代码：
<style type="text/css">
<!--
BODY
{
scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #FF99FF;
scrollbar-track-color: #FFCCFF;
}
-->
</style>
它在chrome中不起作用，但它在IE中起作用并且不确定其他浏览器。我使用 chrome 作为我的主要浏览器，我在其他网站上也看到过这个问题，但想知道是否有任何解决方法？
现在有一种方法可以使用特殊脚本创建可在所有浏览器中使用的半透明 div/box，所以想知道是否有类似的滚动条解决方案？
谢谢！
这里有一些适用于所有浏览器的插件：
::-webkit-scrollbar {
width: 15px;
background:lightgray;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,255,1);
border-radius: 15px;
}
::-webkit-scrollbar-thumb {
border-radius: 15px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
background:cyan;
}
这将在 Chrome 中运行。Firefox 不支持滚动样式。希望能帮助到你！
scrollbar不是 CSS 标准。在 Chrome 或 Safari (WebKit) 中，您可以使用以-webkit- Read more here为前缀的扩展。
FireFox 不支持滚动条样式。
所以可能你只能在 IE 和 WebKit 浏览器中支持这种效果，或者像 Iwo Kucharski 所说的那样使用 JavaScript 库。
/*! Firefox */
html{
scrollbar-color: #128612 #004E00;
}
/*! Other Browser */
html {
--scrollbarBG: #128612;
--thumbBG: #004E00;
}
body::-webkit-scrollbar {
width: 11px;
}
body {
scrollbar-width: thin;
scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
background-color: var(--thumbBG) ;
border-radius: 6px;
border: 3px solid var(--scrollbarBG);
}
这些属性在 Internet Explorer 之外根本不起作用。它们是一种有点奇怪的微软混合物，从来没有任何标准。
如果你想伪造它，你需要一些 Javascript。我不认为纯 CSS 会给你带来这种效果。
支持现代浏览器的自定义滚动条示例 将鼠标拖到测试上
(function (n, t) { function u(n) { n.hasOwnProperty("data-simple-scrollbar") || Object.defineProperty(n, "data-simple-scrollbar", new SimpleScrollbar(n)) } function e(n, i) { function f(n) { var t = n.pageY - u; u = n.pageY; r(function () { i.el.scrollTop += t / i.scrollRatio }) } function e() { n.classList.remove("sc-grabbed"); t.body.classList.remove("sc-grabbed"); t.removeEventListener("mousemove", f); t.removeEventListener("mouseup", e) } var u; n.addEventListener("mousedown", function (i) { return u = i.pageY, n.classList.add("sc-grabbed"), t.body.classList.add("sc-grabbed"), t.addEventListener("mousemove", f), t.addEventListener("mouseup", e), !1 }) } function i(n) { for (this.target = n, this.bar = '<div class="sc-scroll">', this.wrapper = t.createElement("div"), this.wrapper.setAttribute("class", "sc-wrapper"), this.el = t.createElement("div"), this.el.setAttribute("class", "sc-content"), this.wrapper.appendChild(this.el); this.target.firstChild;)this.el.appendChild(this.target.firstChild); this.target.appendChild(this.wrapper); this.target.insertAdjacentHTML("beforeend", this.bar); this.bar = this.target.lastChild; e(this.bar, this); this.moveBar(); this.el.addEventListener("scroll", this.moveBar.bind(this)); this.el.addEventListener("mouseenter", this.moveBar.bind(this)); this.target.classList.add("sc-container") } function f() { for (var i = t.querySelectorAll("*[sc-container]"), n = 0; n < i.length; n++)u(i[n]) } var r = n.requestAnimationFrame || n.setImmediate || function (n) { return setTimeout(n, 0) }; i.prototype = { moveBar: function () { var t = this.el.scrollHeight, i = this.el.clientHeight, n = this; this.scrollRatio = i / t; r(function () { n.bar.style.cssText = "height:" + i / t * 100 + "%; top:" + n.el.scrollTop / t * 100 + "%;right:-" + (n.target.clientWidth - n.bar.clientWidth) + "px;" }) } }; t.addEventListener("DOMContentLoaded", f); i.initEl = u; i.initAll = f; n.SimpleScrollbar = i })(window, document) /* custom scrollbar */
.sc-wrapper {
overflow : hidden;
height : 100%;
position : relative;
z-index : 1;
float: left;
}
.sc-content {
height : 100%;
width : 100%;
padding : 0 32px 0 0;
position : relative;
right : -18px;
overflow : auto;
-moz-box-sizing : border-box;
box-sizing : border-box;
}
.sc-scroll {
position : relative;
background : rgba(0, 0, 0, .1);
width : 9px;
border-radius : 4px;
top : 0;
z-index : 2;
cursor : pointer;
opacity: 0;
transition: opacity 0.25s linear;
}
.sc-container:hover .sc-scroll {
opacity: 1;
}
.sc-grabbed {
user-select: none;
-o-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}
.msg-page {
height: 500px;
width: 400px;
} <div class="container">
<div class="msg-page" sc-container>
test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>
</div>
</div>如果我们禁用 javascript，滚动将不起作用，是不是也没有人有代码<noscript>。