CODEWITHSUNDEEP
cssscrollbar
Farah Wahab
Farah Wahab

Reputation: 261

How to make custom scrollbars show in all browsers?

I am using a simple code for a color customized scrollbar:

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

And it doesn't work in chrome, but it does in IE and not sure about other browsers. I am using chrome as my main browser, I have seen this issue on other websites as well but was wondering if there was any way around it?

There is a way to create semi-opacity divs/boxes that work in all browsers these days with special scripts, so was wondering if there was a solution like that for the scrollbars?

Thanks!

Upvotes: 26

Views: 118020

Answers (7)

vijay pandey
vijay pandey

Reputation: 1

Custom Scrollbar Example to support modern browsers Drag mouse over test

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

Upvotes: 0

Artron
Artron

Reputation: 266

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

Upvotes: 5

User3298137412
User3298137412

Reputation: 1

If we disable the javascript the scroll won't work, is no one have the code in <noscript> as well.

Upvotes: -2

Shradhey Tripathi
Shradhey Tripathi

Reputation: 380

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

This will work in Chrome. Firefox doesn't support scroll styling. Hope it helps!

Upvotes: 9

Agustin Meriles
Agustin Meriles

Reputation: 4854

scrollbar is not a CSS standard. In Chrome or Safari (WebKit) you can use the extension prefixed by -webkit- Read more here.

FireFox doesn't support scrollbar styling.

So probably you can support this effect in IE and WebKit browsers only, or use JavaScript libraries as Iwo Kucharski said.

Upvotes: 2

Iwo Kucharski
Iwo Kucharski

Reputation: 3825

Here have some plugins that works for all browsers:

  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/

Upvotes: 11

salezica
salezica

Reputation: 76909

Those attributes will simply not work outside Internet Explorer. They are a somewhat bizarre Microsoft concoction that was never in any standard.

If you want to fake it, you'll need some Javascript. I don't think pure CSS will get you the effect.

Upvotes: 1

Related Questions