Menu
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/
928
For webkit browsers, you can use the following pseudo elements to customize the browser's scrollbar: ::-webkit-scrollbar the scrollbar. ::-webkit-scrollbar-button the buttons on the scrollbar (arrows pointing upwards and downwards). ::-webkit-scrollbar-thumb the draggable scrolling handle.
Suppose we want to add a scroll bar option in HTML, use an “overflow” option and set it as auto-enabled for adding both horizontal and vertical scroll bars. If we want to add a vertical bar option in Html, add the line “overflow-y” in the files.
The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable. Example 1: In this example, we have used the overflow-y: hidden; and overflow-x: auto; to make div horizontally scrollable.
Setting overflow: hidden hides the scrollbar. Set overflow: scroll to make sure the scrollbar appears all the time. To use the ::webkit-scrollbar property, simply target . scroll before calling it.
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.
101
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
