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>