How to make a custom scroll bars in IE?

Question

I have this nice scrollbar which is working in Chrome as well as in Safari latest versions. Is it possible to create the same kind of scrollbar for IE9+ using pure CSS?

CSS:

.scrollbar
{
    float: left;
    height: 300px;
    background: #F5F5F5;
    overflow-y: scroll;
    margin-bottom: 25px;
}

.scrollbar-active
{
    min-height: 450px;
}

#scroll::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#scroll::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#scroll::-webkit-scrollbar-thumb
{
    background-color: #000000;
    border: 2px solid #555555;
}

HTML:

<div class="scrollbar" id="scroll">
    <div class="scrollbar-active"></div>
</div>

DEMO: https://jsfiddle.net/7gmut6w3/2/

Solution 1

These are the CSS properties you can use to adjust the style of IE scrollbars:

body{
  scrollbar-base-color: #000;
  scrollbar-face-color: #000;
  scrollbar-3dlight-color: #000;
  scrollbar-highlight-color: #000;
  scrollbar-track-color: #000;
  scrollbar-arrow-color: black;
  scrollbar-shadow-color: #000;
  scrollbar-dark-shadow-color: #000;
}

More information can be found here.

WORD OF CAUTION - Adjusting a native element of a web browser (like a scrollbar) can introduce all sorts of weird edge cases and user experience issues. Be careful with any adjustments you make, making sure the added benefit of custom scrollbars outweighs the issues it will present.

Solution 2

I've gone further and created a css only pure solution that not only provides a custom scrollbar for IE but also a custom seamlessly scrollbar that works in ALL BROWSERS giving the same look and feel for all of them. Enjoy!

Description: It uses the webkit scrollbar css selector for Chrome Safari and Opera, the two (very old) simple scrollbar properties for firefox (introduced in version 64), and a media query trick to target ie (10, 11) and Edge in order to provide a mixing behavior that moves and hides part of the scrollbar width, top and bottom to provide the same look like in the other browsers.

Note: At this point you cannot provide standard css styling for scrollbar on Microsoft Edge (or colors), however it has a lot of votes and you can vote for this requirement as well.

.scrollable {
  background-color: #a3d5d3;
  height: 100%;
  overflow-y: auto;
}

.scrollable-container {
  background-color: #a3d5d3;
  width: 240px;
  height: 160px;
  position: relative;
  overflow: hidden;
  margin: auto;
  margin-top: 16px;
}

.scrollable div {
  font-size: 23px;
  
}

/*IE*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.scrollable {
        margin-right: -10px;
        padding-top: 32px;
        margin-top: -32px;
        margin-bottom: -32px;
        padding-bottom: 32px;

        /* ie scrollbar color properties */
        scrollbar-base-color: #efefef;
        scrollbar-face-color: #666666;
        scrollbar-3dlight-color: #666666;
        scrollbar-highlight-color: #666666;
        scrollbar-track-color: #efefef;
        scrollbar-arrow-color: #666666;
        scrollbar-shadow-color: #666666;
        scrollbar-dark-shadow-color: #666666;
  }
  
      .scrollable:after {
        content: "";
        height: 32px;
        display: block;
    }
    
}

/*Edge*/
@supports (-ms-ime-align:auto)  {
.scrollable {
        margin-right: -10px;
        padding-top: 16px;
        margin-top: -16px;
        margin-bottom: -16px;
        padding-bottom: 16px;
}
  
.scrollable:after {
    content: "";
    height: 16px;
    display: block;
}
}

/*Firefox*/
/*From version 64 - https://drafts.csswg.org/css-scrollbars-1/*/
.scrollable {
    scrollbar-width: thin;
    scrollbar-color: #666666 #efefef;
}


/*Chrome*/
.scrollable::-webkit-scrollbar-track {
    background-color: #efefef;
    width: 4px;
}

.scrollable::-webkit-scrollbar-thumb {
    background-color: #666666;
    border: 1px solid transparent;
    background-clip: content-box;
}

.scrollable::-webkit-scrollbar {
    width: 8px;
}

<div class="scrollable-container">
  <div class="scrollable">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
    <div>Element 9</div>
  </div>
</div>

Solution 3

if you set all top area items to same color as the track it will - in essence - hide the arrow, but space will still be there.

scrollbar-track-color:  #AAA;
scrollbar-3dlight-color:  #AAA;
scrollbar-darkshadow-color:  #AAA;
scrollbar-arrow-color:  #AAA;

now if only you could adjust the width to make the scrollbar narrower!! has anyone figured this one out?