如何在所有浏览器中显示自定义滚动条？

Question

我正在使用一个简单的代码来定制颜色滚动条：

<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，所以想知道是否有类似的滚动条解决方案？

谢谢！

Answer 1

这些属性在 Internet Explorer 之外根本不起作用。它们是一种有点奇怪的微软混合物，从来没有成为任何标准。

如果你想伪造它，你需要一些 Javascript。我认为纯 CSS 不会为您带来效果。

Answer 2

这里有一些适用于所有浏览器的插件：

1. http://jscrollpane.kelvinluck.com/
2. http://www.hesido.com/web.php?page=customscrollbar
3. http://www.script-tutorials.com/custom-scrollbars-cross-browser-solution/

Answer 3

scrollbar 不是 CSS 标准。在 Chrome 或 Safari (WebKit) 中，您可以使用前缀为 -webkit- Read more here 的扩展。

FireFox 不支持滚动条样式。

所以可能你只能在 IE 和 WebKit 浏览器中支持这种效果，或者像 Iwo Kucharski 所说的那样使用 JavaScript 库。

Answer 4

::-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 不支持滚动样式。 希望对您有所帮助！

Answer 5

如果我们禁用 javascript，滚动将无法工作，是不是没有人也有 <noscript> 中的代码。

Answer 6

/*! 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);
  }

Answer 7

支持现代浏览器的自定义滚动条示例 将鼠标拖过测试

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