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/

shaneonabike · Accepted Answer · 2018-06-21 13:12:02Z

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.

Just to point out to others as well -- it looks like there's still no way of customizing the curve/border of IE scrollbar. Or to get rid of the top and bottom arrows.
... or change color of thumbs independently of slider color.
Am I going cross-eyed, or are the first two properties the same?
He meant base-color and face-color, both refer to the same thing but are used in different IE versions.

Alejandro Lasebnik · Accepted Answer · 2019-08-18 13:03:44Z

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>

Can we have rounded edges on the scrollbar like a Mac scrollbar has?
This is the perfect answer. It is quite new answer that's why low up-votes!! This saved my day when we were struggling to do something with IE scrollbar.
Just one thing, padding-bottom thing used didn't work for me so used following: .scrollable>*:last-child { padding-bottom: 20px; }

Judy Engelsman · Accepted Answer · 2016-06-29 06:49:05Z

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?

This is an excellent solution to hide the ugly Windows 8 scrollbar arrows without coding scrollbars from scratch. Thanks for sharing

Collectives™ on Stack Overflow

How to make a custom scroll bars in IE?

3 Answers 3

6 Comments

3 Comments

1 Comment

Linked

Hot Network Questions