Apple-like scrollbars using CSS
The following CSS monster is what Apple is using:
http://jsfiddle.net/thirtydot/kTsUc/886/
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-corner {
background-image: url(http://i.stack.imgur.com/FguQn.png?corner.png);
background-repeat: no-repeat;
}
::-webkit-resizer {
background-image: url(http://i.stack.imgur.com/aKKDY.png?resizer.png);
background-repeat: no-repeat;
background-position: bottom right;
}
::-webkit-scrollbar-button:start {
display: none;
}
::-webkit-scrollbar-button:end {
display: block;
}
::-webkit-scrollbar:horizontal {
-webkit-border-image: url(http://i.stack.imgur.com/NQ2K6.png?horizontal-button.png) 0 2 0 2;
border-color: transparent;
border-width: 0 2px;
background-image: url(http://i.stack.imgur.com/8xDbU.png?horizontal-button-background.png);
background-repeat: repeat-x;
}
::-webkit-scrollbar:horizontal:corner-present {
border-right-width: 0;
}
::-webkit-scrollbar-thumb:horizontal {
-webkit-border-image: url(http://i.stack.imgur.com/YQRD7.png?horizontal-thumb.png) 0 15 0 15;
border-color: transparent;
border-width: 0 15px;
min-width: 20px;
}
::-webkit-scrollbar-track-piece:horizontal:start {
margin-left: 6px;
}
::-webkit-scrollbar-track-piece:horizontal:end {
margin-right: -6px;
}
::-webkit-scrollbar-track-piece:horizontal:decrement {
-webkit-border-image: url(http://i.stack.imgur.com/p9yMk.png?horizontal-track.png) 0 15 0 15;
border-color: transparent;
border-width: 0 0 0 15px;
}
::-webkit-scrollbar-track-piece:horizontal:increment {
-webkit-border-image: url(http://i.stack.imgur.com/p9yMk.png?horizontal-track.png) 0 15 0 15;
border-color: transparent;
border-width: 0 15px 0 0;
}
::-webkit-scrollbar-button:horizontal {
width: 21px;
-webkit-border-image: url(http://i.stack.imgur.com/NQ2K6.png?horizontal-button.png) 0 2 0 2;
border-color: transparent;
border-width: 0 2px;
}
::-webkit-scrollbar-button:horizontal:decrement {
background-image: url(http://i.stack.imgur.com/dGOKL.png?horizontal-decrement-arrow.png), url(http://i.stack.imgur.com/8xDbU.png?horizontal-button-background.png);
background-repeat: no-repeat, repeat-x;
background-position: 7px 4px, 0 0;
}
::-webkit-scrollbar-button:horizontal:decrement:active {
-webkit-border-image: url(http://i.stack.imgur.com/gT5BM.png?horizontal-button-active.png) 0 2 0 2;
background-image: url(http://i.stack.imgur.com/dGOKL.png?horizontal-decrement-arrow.png), url(http://i.stack.imgur.com/RDf8L.png?horizontal-button-background-active.png);
}
::-webkit-scrollbar-button:horizontal:increment {
background-image: url(http://i.stack.imgur.com/5rJr5.png?horizontal-increment-arrow.png), url(http://i.stack.imgur.com/8xDbU.png?horizontal-button-background.png);
background-repeat: no-repeat, repeat-x;
width: 16px;
border-left-width: 0;
background-position: 3px 4px, 0 0;
}
::-webkit-scrollbar-button:horizontal:increment:active {
-webkit-border-image: url(http://i.stack.imgur.com/gT5BM.png?horizontal-button-active.png) 0 2 0 2;
background-image: url(http://i.stack.imgur.com/5rJr5.png?horizontal-increment-arrow.png), url(http://i.stack.imgur.com/RDf8L.png?horizontal-button-background-active.png);
}
::-webkit-scrollbar-button:horizontal:end:increment:corner-present {
border-right-width: 0;
width: 15px;
}
::-webkit-scrollbar:vertical {
-webkit-border-image: url(http://i.stack.imgur.com/NdaTT.png?vertical-button.png) 2 0 2 0;
border-color: transparent;
border-width: 2px 0;
background-image: url(http://i.stack.imgur.com/p7j9a.png?vertical-button-background.png);
background-repeat: repeat-y;
}
::-webkit-scrollbar:vertical:corner-present {
border-bottom-width: 0;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-image: url(http://i.stack.imgur.com/rPEsZ.png?vertical-thumb.png) 15 0 15 0;
border-color: transparent;
border-width: 15px 0;
min-height: 20px;
}
::-webkit-scrollbar-track-piece:vertical:start {
margin-top: 6px;
}
::-webkit-scrollbar-track-piece:vertical:end {
margin-bottom: -6px;
}
::-webkit-scrollbar-track-piece:vertical:decrement {
-webkit-border-image: url(http://i.stack.imgur.com/Rb6ru.png?vertical-track.png) 15 0 15 0;
border-color: transparent;
border-width: 15px 0 0 0;
}
::-webkit-scrollbar-track-piece:vertical:increment {
-webkit-border-image: url(http://i.stack.imgur.com/Rb6ru.png?vertical-track.png) 15 0 15 0;
border-color: transparent;
border-width: 0 0 15px 0;
}
::-webkit-scrollbar-button:vertical {
height: 21px;
-webkit-border-image: url(http://i.stack.imgur.com/NdaTT.png?vertical-button.png) 2 0 2 0;
border-color: transparent;
border-width: 2px 0;
}
::-webkit-scrollbar-button:vertical:decrement {
background-image: url(http://i.stack.imgur.com/KQvwk.png?vertical-decrement-arrow.png), url(http://i.stack.imgur.com/p7j9a.png?vertical-button-background.png);
background-repeat: no-repeat, repeat-y;
background-position: 4px 7px, 0 0;
}
::-webkit-scrollbar-button:vertical:decrement:active {
-webkit-border-image: url(http://i.stack.imgur.com/uW3TL.png?vertical-button-active.png) 2 0 2 0;
background-image: url(http://i.stack.imgur.com/KQvwk.png?vertical-decrement-arrow.png), url(http://i.stack.imgur.com/puDsH.png?vertical-button-background-active.png);
}
::-webkit-scrollbar-button:vertical:increment {
background-image: url(http://i.stack.imgur.com/UjkVR.png?vertical-increment-arrow.png), url(http://i.stack.imgur.com/p7j9a.png?vertical-button-background.png);
background-repeat: no-repeat, repeat-y;
height: 16px;
border-top-width: 0;
background-position: 4px 5px, 0 0;
}
::-webkit-scrollbar-button:vertical:increment:active {
-webkit-border-image: url(http://i.stack.imgur.com/uW3TL.png?vertical-button-active.png) 2 0 2 0;
background-image: url(http://i.stack.imgur.com/UjkVR.png?vertical-increment-arrow.png), url(http://i.stack.imgur.com/puDsH.png?vertical-button-background-active.png);
}
::-webkit-scrollbar-button:vertical:end:increment:corner-present {
border-bottom-width: 0;
height: 15px;
}
::-webkit-scrollbar:disabled {
background: red;
-webkit-border-image: none;
display: none;
}
Some useful blog posts:
- http://webkit.org/blog/363/styling-scrollbars/
- http://web.archive.org/web/20120115134443/http://numerosign.com/notebook/styling-webkit-scrollbars-with-css3/
- http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task
Hide scrollbar when not scrolling (Mac like behaviour)
Hopefully this helps. A bit of debouncing and css for scrollbar. If you want to change the style / animation of changing width, there are better resources for that. Good luck!
function debounce(func, timeout = 300){
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => { func.apply(this, args); }, timeout);
};
}
window.addEventListener("mousewheel", e => {
document.querySelector("div").classList.remove("hidden");
});
window.addEventListener("mousewheel", debounce(e => {
document.querySelector("div").classList.add("hidden");
}));div {
background: gray;
overflow: auto;
height: 300px;
width: 100%;
}
div > div {
background: lighblue;
height: 800px;
}
/* width */
.shown::-webkit-scrollbar {
width: 10px;
}
/* width */
.hidden::-webkit-scrollbar {
width: 0px;
}
/* Track */
::-webkit-scrollbar-track {
background: black;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: white;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: lightblue;
}<div class="shown">
<div></div>
</div>Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink
The appearance of the scroll bars can be controlled with WebKit's -webkit-scrollbar pseudo-elements [blog]. You can disable the default appearance and behaviour by setting -webkit-appearance [docs] to none.
Because you're removing the default style, you'll also need to specify the style yourself or the scroll bar will never show up. The following CSS recreates the appearance of the hiding scroll bars:
Example (jsfiddle)
CSS.frame::-webkit-scrollbar {
-webkit-appearance: none;
}
.frame::-webkit-scrollbar:vertical {
width: 11px;
}
.frame::-webkit-scrollbar:horizontal {
height: 11px;
}
.frame::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
.frame::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
How to make scroll bar permanently visible on Mac OS using CSS or jQuery
I agree with @DinoMyte ,
overflow:scroll
would be a good option for this if all you want to do is show the scroll bar.
Here is the link to overflow property .
http://www.w3schools.com/cssreF/pr_pos_overflow.asp
Also another way to force the scroll in safari
http://jsfiddle.net/simurai/UsvLN/
Credit goes to http://simurai.com/blog/2011/07/26/webkit-scrollbar
Hope this helps.
CSS overflow scrolling and hidden scrollbar (iOS)
As of May 2020, this was the only solution that allowed me to hide the horizontal scrollbar on iOS Safari - including when the website is installed on the home screen as a PWA.
The idea is to make your container slightly higher than it needs to be with a padding-bottom, and to clip out that extra space where to scrollbar appears with clip-path.
Here is a snippet:
.scroll-container {
width: 100%;
padding-bottom: 30px;
white-space: nowrap;
overflow: auto;
clip-path: inset(0 0 30px 0);
}
.item {
display: inline-block;
width: 150px;
height: 300px;
margin-right: 20px;
background-color: #ddd;
border-radius: 20px;
}<div class="scroll-container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>CSS - Overflow: Scroll; - Always show vertical scroll bar?
Just ran into this problem myself. OSx Lion hides scrollbars while not in use to make it seem more "slick", but at the same time the issue you addressed comes up: people sometimes cannot see whether a div has a scroll feature or not.
The fix: In your css include -
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
/* always show scrollbars */
::-webkit-scrollbar { -webkit-appearance: none; width: 7px;}
::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0, 0, 0, .5); box-shadow: 0 0 1px rgba(255, 255, 255, .5);}
/* css for demo */
#container { height: 4em; /* shorter than the child */ overflow-y: scroll; /* clip height to 4em and scroll to show the rest */}
#child { height: 12em; /* taller than the parent to force scrolling */}
/* === ignore stuff below, it's just to help with the visual. === */
#container { background-color: #ffc;}
#child { margin: 30px; background-color: #eee; text-align: center;}<div id="container"> <div id="child">Example</div></div>CSS styled scrollbars support for safari mobile on iOS 6 disappeared?
For a unreleased (AFAIK) reason, Apple removed some of the webkit prefixed CSS properties. This includes the -webkit-scrollbar group.
Related Topics
Scss Extend a Nested Selector and Override the Nested Rulesets
How to Prevent a CSS Keyframe Animation from Running on Page Load
Word-Wrap:Break-Word Not Working in IE8
Select an Element with Empty Class Attribute (Class="") Using CSS
Creating an Isoceles Trapezoid Shape
What Does @-Moz-Document Url-Prefix() Do
Differencebetween :Before and ::Before
Mysterious Whitespace in Between Bootstrap2 Navbar and Row Underneath
Is Box Sizing Inherited If Declared Inside Universal Selector
How to Stick a Footer to Bottom in CSS
How to Implement Wordwrap on Jqgrid Which Works on IE7, IE8 and Ff
Forcing Child to Obey Parent's Curved Borders in CSS
Pure CSS Multiple Stacked Position Sticky
Order of Prioritization When Using Multiple Contradictory CSS Files
Why Can't I Animate Custom Properties (Aka CSS Variables)
How to Check Which CSS Styles Are Being Used or Not Used on a Web Page