I've managed to customise the scrollbar of a list that works in Chrome, Safari and Edge, however in Firefox, the track still appears. It seems that Firefox doesn't support ::webkit-scrollbar so does anyone have any suggestions on how to make the track transparent/invisible?
Try this code.
.scrollbar {
width: 500px;
height: 150px;
overflow-y: scroll;
scrollbar-color: grey transparent;
scrollbar-width: thin;
}
.scrollbar::-webkit-scrollbar-track
{
box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: transparent;
}
.scrollbar::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}
.scrollbar::-webkit-scrollbar-thumb
{
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0,0,0,.3);
background-color: grey;
}
<div class="scrollbar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum semper tortor at pellentesque. Suspendisse iaculis quis risus in sagittis. Vestibulum elementum pulvinar vulputate. Morbi rutrum nisl eget finibus efficitur. Donec sed pellentesque purus. Nam vel euismod quam. Quisque lobortis aliquet nibh nec placerat. Maecenas volutpat orci dolor, mollis elementum tortor efficitur malesuada.Ut elementum sagittis lorem, non tempus diam euismod eu. Nullam vel diam ornare, aliquet enim non, sodales nulla. Pellentesque molestie, felis id pellentesque mattis, purus metus ultrices ipsum, vitae tristique nunc ante a odio. Quisque malesuada, felis sed tempor feugiat, est ante hendrerit sem, a porta elit metus ac est. Nullam sed felis leo. Donec ac vehicula dolor. Duis vel lacus volutpat, congue leo et, congue ex. Nullam rhoncus orci ut odio rutrum, id hendrerit elit malesuada. Curabitur orci neque, mollis ut aliquam a, dictum vitae massa. Donec efficitur ornare varius. Aliquam vulputate pharetra tortor nec finibus.
</div>
Related
Currently, I have a scrollbar displaying over part of the page when there is a need for it.
I would like to apply styling to the scrollbar such that it doesn't look so bright and I can have the background area of the scrollbar to be transparent. Hence, I tried to apply styling to it. But the scrollbar still seems to be the same. To test if the styling is working, I gave some styles to the scroll based on this article:
https://css-tricks.com/almanac/properties/s/scrollbar/
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: red;
outline: 1px solid slategrey;
}
But nothing seems to change.
Don't even see those style attributes in developer tools.
Is it not possible to apply custom styling to the browser scrollbar ? Also, can I give scrollbar styling to a div element ? or It has to be at the root/body level?
This gives a transparent background on Firefox, Chrome, Edge and Safari.
Edit: It seems that height is needed under ::webkit-scrollbar in order for it to work on chrome using MacOS.
body {
margin: 0;
background: grey;
height: 500px;
overflow: overlay;
}
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: green transparent;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
height: 10px;
width: 16px;
}
*::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0);
}
*::-webkit-scrollbar-thumb {
background-color: green;
border-radius: 10px;
border: 3px solid #ffffff;
}
<body/>
Try to also add a ::-webkit-scrollbar, like this
body::-webkit-scrollbar {
width: 12px;
}
Looks like you also need to add the ::-webkit-scrollbar to make styles work, I do not know the reason for this, and have not found an explanation. But the ::-webkit-scrollbar represent the whole scrollbar. An example:
body {
width: 300px;
height: 400px;
}
body::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: red;
outline: 1px solid slategrey;
}
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod auctor nulla, et fermentum nisi gravida quis. Phasellus molestie velit felis, nec vestibulum dolor tristique non. Mauris luctus nunc ultricies lacus tristique, at bibendum magna ullamcorper. Phasellus lobortis ut quam vel lacinia. Vestibulum euismod magna eu lacus semper lacinia. Phasellus id neque vel metus vehicula varius quis pellentesque massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut fermentum ex nisi, nec iaculis quam efficitur in. Vivamus pharetra nec velit id placerat.
In id pretium dolor. Nulla facilisi. Sed in faucibus purus, quis convallis lacus. Duis nisl lectus, euismod sagittis euismod ac, tempus quis tortor. In ut dui diam. Integer laoreet metus sed arcu interdum, vitae sagittis magna tristique. Morbi fermentum velit non lectus viverra iaculis. Curabitur ac nulla congue, vehicula quam id, congue tortor. Maecenas porta bibendum mauris, blandit aliquet massa rhoncus in.
Morbi aliquet nunc non dolor consectetur lacinia. Maecenas eu viverra magna. Sed consectetur gravida urna. Aenean eu vehicula mi. Duis a ex tristique lorem mattis molestie. Phasellus eget dolor ex. Nullam congue tortor in lorem lacinia, sit amet condimentum arcu facilisis. Nam quis felis placerat, rhoncus nulla non, accumsan justo. Morbi id placerat nunc. Aenean eleifend nec lacus vitae sodales. Vestibulum eu urna eu elit rhoncus dapibus non vitae ex. Vivamus eget cursus nibh. Vestibulum cursus ipsum diam, vel aliquet leo laoreet eu. Integer hendrerit, purus sed gravida euismod, metus odio aliquam purus, in semper orci urna a ex. Morbi dignissim finibus nisi sed aliquet.
Suspendisse in lectus nec orci tincidunt mattis. Morbi mollis nec nibh a dignissim. Vestibulum mi elit, dictum et posuere id, pharetra consectetur tortor. Suspendisse potenti. Sed suscipit interdum tellus, et gravida ipsum mattis sit amet. Maecenas fermentum non quam eu sollicitudin. Vestibulum sodales mauris ac ipsum fermentum vulputate. Nulla pharetra mattis gravida. Aenean at magna turpis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque dignissim ultricies quam, ac maximus tortor interdum vel. Quisque eget ultricies ligula. Duis urna augue, ornare ac euismod eu, maximus non augue. Cras eget mi sapien. Nulla tincidunt aliquam lacus in vulputate. Praesent vel feugiat dui. Phasellus tellus erat, malesuada et eleifend in, fringilla eu nisl. Maecenas hendrerit sem quam, congue fermentum arcu tincidunt vel.
</body>
Can someone help me with the scrollbar on Mac OS X in Mozilla firefox and in mobile safari?
scrollbar-color in css works only in windows machines, other js libraries not working on , always scrollbar has system default styles.
Maybe someone has already had some dealings with this?
it worked for me without any problems. ::-webkit-scrollbar-thumb ::-webkit-scrollbar-track and ::-webkit-scrollbar
More info developer.mozilla
div{
width: 400px;
height: 400px;
background: yellow;
overflow: auto;
}
::-webkit-scrollbar-thumb {
background: #0a59e3;
border-radius: 16px;
box-shadow: inset 2px 2px 2px hsl(219deg 31% 32%), inset -2px -2px 2px rgb(18 24 38);
}
::-webkit-scrollbar-track {
background: #0f1520;
}
::-webkit-scrollbar {
width: 1.65em;
height: 1.65em;
background: red;
}
<div class="visible-scrollbar">
Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
Proin at nulla elementum, consectetur ex eget, commodo ante.
Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
blandit quam turpis, at mollis velit pretium ut. Nunc consequat
efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
mattis cursus dolor. Pellentesque id pretium est. Quisquebibendum ut dignissim et, maximus eget nibh. Phasellus
blandit quam turpis, at mollis velit pretium ut. Nunc consequat
efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
mattis cursus dolor. Pellentesque id pretium est. Quisquebibendum ut dignissim et, maximus eget nibh. Phasellus
blandit quam turpis, at mollis velit pretium ut. Nunc consequat
efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
mattis cursus dolor. Pellentesque id pretium est. Quisque
convallis nisi a diam malesuada mollis. Aliquam at enim ligula.
</div>
I would be grateful for advice about how to rotate a button in a flex context. I have a flex container with a "row" direction (that is, the three content items are arranged from left to right in a row), and the leftmost content item is a <div> that contains just a <button> with a few words of text in it. I want that <div> to be rendered vertically (so that the text reads from bottom to top), to hug the left edge of the container, and to be just the width of its one line of text.
The sample at https://jsfiddle.net/djbpitt/gth3nck9/74/ works as I need it to in Firefox 89, but in Chrome 90 (and Safari 14.1.1) the button is not rotated. caniuse.com tells me that vendor prefixes should not be required for CSS transform: rotate() or writing-mode: vertical-lr;, and adding a -webkit prefix doesn't seem to help anyway.
I would be grateful if someone could please advise me about how I can obtain the behavior I need in the versions of Firefox, Chrome, and Safari mentioned above (which are the latest versions as I write this). I would prefer a pure HTML/CSS (that is, no JavaScript) solution. Thank you!
html {
height: 100%;
}
body {
display: flex;
flex-direction: row;
height: 100%;
margin-left: 0;
padding-left: 0;
}
body > * {
overflow-y: auto;
height: 100vh;
}
body > section {
flex: auto;
}
div#button {
display: flex;
flex: 0 0 1em;
border: none;
justify-content: center;
transform: rotate(180deg);
margin: 0 5px 0 0;
padding: 0;
overflow: visible;
}
button {
margin: auto;
border: 1px black solid;
border-radius: 10px 0 0 10px;
padding: 3px;
}
button > span {
writing-mode: vertical-lr;
width: 1em;
margin: 3px;
}
nav {
flex: 0 0 20em;
margin-right: 1em;
padding-right: 1em;
border-right: 1px gray solid;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
</head>
<body>
<div id="button">
<button><span>Rotate me!</span></button>
</div>
<nav>
<ul>
<li>first</li>
<li>section</li>
</ul>
</nav>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim tristique est, et facilisis urna aliquet et. Vivamus porta laoreet mi non cursus. Integer volutpat tortor lectus, interdum gravida libero interdum ac. Curabitur malesuada cursus laoreet. Donec nec varius est, ac venenatis velit. Vivamus ac ipsum et nibh dictum dignissim. Fusce eget turpis in sem rutrum congue. Donec vitae sollicitudin nunc, elementum porta tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque convallis quam leo, pretium fermentum ante imperdiet sit amet. Quisque egestas risus vitae ante fermentum tincidunt. Sed consectetur efficitur tempus. Nunc tincidunt nunc sed semper accumsan. Ut eu tortor scelerisque, aliquet leo eget, ullamcorper dolor.</p>
<p>Duis non nisi vitae felis ultricies dapibus pulvinar quis ex. Nullam imperdiet, risus sed pharetra aliquam, mi nulla condimentum purus, tincidunt hendrerit ex metus vitae nisl. Nullam venenatis turpis libero, a bibendum elit venenatis ut. Aenean et orci ac metus pretium pellentesque. Phasellus sed faucibus est. Aenean a dui non augue aliquet sagittis quis at ex. Vestibulum lorem lectus, sodales efficitur lacinia id, iaculis id ante. Fusce aliquam erat libero, a ultrices dolor volutpat et. Vivamus at euismod nisl. Donec hendrerit non lacus vel mollis.</p>
<p>Phasellus gravida non nisi quis vehicula. Curabitur sagittis nec nulla eget sollicitudin. Mauris sit amet mattis ligula. Nulla pretium posuere diam vitae tempor. Aenean consequat ligula luctus quam vestibulum, vel rhoncus turpis laoreet. Etiam nec aliquam ipsum, ut tristique lorem. In nec auctor arcu. Proin sed finibus ligula. Sed scelerisque lorem ligula. Nam quis quam vehicula, hendrerit nibh nec, rhoncus elit. Praesent porttitor, tellus nec aliquam sollicitudin, justo orci sagittis nisl, non imperdiet ligula mauris sit amet eros. In dignissim placerat laoreet. Aenean ipsum lorem, aliquet id arcu id, rhoncus porta justo. Integer egestas mauris quam, eget placerat metus sagittis eget. Aenean volutpat eleifend nisi eget interdum.</p>
<p>
Vestibulum in ante lectus. Mauris luctus imperdiet facilisis. Nunc sagittis velit lacus, eget gravida arcu efficitur vitae. Sed sodales felis elit, eget volutpat dui congue sit amet. Fusce mi velit, cursus volutpat dapibus in, auctor id dolor. Maecenas convallis nisl justo. Cras sollicitudin tellus nec dui dictum finibus. Fusce nec feugiat metus. Aliquam sit amet congue nulla. Sed cursus fringilla sapien et malesuada. Duis aliquet, nunc eget consectetur fringilla, felis lectus ultrices mi, id maximus justo mauris a mi.</p>
<p>
Vivamus ac est vitae nulla dignissim posuere ac id arcu. Duis sed tortor pretium, tempus orci vel, efficitur ex. Quisque aliquet enim mattis odio tincidunt lacinia. Vestibulum blandit congue neque ac bibendum. Proin at consequat tortor, id malesuada dolor. Integer interdum purus sit amet leo venenatis, gravida porttitor ipsum eleifend. Donec venenatis maximus faucibus. Duis et magna vitae arcu malesuada sodales.</p>
</main>
</body>
</html>
The problem seems to lie with Chrome/Edge settings for button. They have for example amongst other things:
-webkit-writing-mode: horizontal-tb !important;
So this snippet gives up trying to style a button and replaces it with a div. Obviously you'll want to style that as you wish:
html {
height: 100%;
}
body {
display: flex;
flex-direction: row;
height: 100%;
margin-left: 0;
padding-left: 0;
}
body>* {
overflow-y: auto;
height: 100vh;
}
div#button {
position: relative;
display: flex;
flex: 0 0 1em;
writing-mode: vertical-lr;
border: none;
justify-content: center;
transform: rotate(180deg);
margin: 0 5px 0 0;
padding: 0;
overflow: visible;
}
#button div {
background-color: #eeeeee;
padding: 10px 5px 10px 5px;
border: 1px solid black;
border-radius: 5px;
}
nav {
flex: 0 0 20em;
margin-right: 1em;
padding-right: 1em;
border-right: 1px gray solid;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
<div id="button">
<div>Rotate me!</div>
</div>
<nav>
<ul>
<li>first</li>
<li>section</li>
</ul>
</nav>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim tristique est, et facilisis urna aliquet et. Vivamus porta laoreet mi non cursus. Integer volutpat tortor lectus, interdum gravida libero interdum ac. Curabitur malesuada cursus
laoreet. Donec nec varius est, ac venenatis velit. Vivamus ac ipsum et nibh dictum dignissim. Fusce eget turpis in sem rutrum congue. Donec vitae sollicitudin nunc, elementum porta tortor. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Pellentesque convallis quam leo, pretium fermentum ante imperdiet sit amet. Quisque egestas risus vitae ante fermentum tincidunt. Sed consectetur efficitur tempus. Nunc tincidunt nunc sed semper accumsan. Ut eu tortor
scelerisque, aliquet leo eget, ullamcorper dolor.</p>
<p>Duis non nisi vitae felis ultricies dapibus pulvinar quis ex. Nullam imperdiet, risus sed pharetra aliquam, mi nulla condimentum purus, tincidunt hendrerit ex metus vitae nisl. Nullam venenatis turpis libero, a bibendum elit venenatis ut. Aenean et
orci ac metus pretium pellentesque. Phasellus sed faucibus est. Aenean a dui non augue aliquet sagittis quis at ex. Vestibulum lorem lectus, sodales efficitur lacinia id, iaculis id ante. Fusce aliquam erat libero, a ultrices dolor volutpat et. Vivamus
at euismod nisl. Donec hendrerit non lacus vel mollis.</p>
<p>Phasellus gravida non nisi quis vehicula. Curabitur sagittis nec nulla eget sollicitudin. Mauris sit amet mattis ligula. Nulla pretium posuere diam vitae tempor. Aenean consequat ligula luctus quam vestibulum, vel rhoncus turpis laoreet. Etiam nec aliquam
ipsum, ut tristique lorem. In nec auctor arcu. Proin sed finibus ligula. Sed scelerisque lorem ligula. Nam quis quam vehicula, hendrerit nibh nec, rhoncus elit. Praesent porttitor, tellus nec aliquam sollicitudin, justo orci sagittis nisl, non imperdiet
ligula mauris sit amet eros. In dignissim placerat laoreet. Aenean ipsum lorem, aliquet id arcu id, rhoncus porta justo. Integer egestas mauris quam, eget placerat metus sagittis eget. Aenean volutpat eleifend nisi eget interdum.</p>
<p>
Vestibulum in ante lectus. Mauris luctus imperdiet facilisis. Nunc sagittis velit lacus, eget gravida arcu efficitur vitae. Sed sodales felis elit, eget volutpat dui congue sit amet. Fusce mi velit, cursus volutpat dapibus in, auctor id dolor. Maecenas
convallis nisl justo. Cras sollicitudin tellus nec dui dictum finibus. Fusce nec feugiat metus. Aliquam sit amet congue nulla. Sed cursus fringilla sapien et malesuada. Duis aliquet, nunc eget consectetur fringilla, felis lectus ultrices mi, id maximus
justo mauris a mi.</p>
<p>
Vivamus ac est vitae nulla dignissim posuere ac id arcu. Duis sed tortor pretium, tempus orci vel, efficitur ex. Quisque aliquet enim mattis odio tincidunt lacinia. Vestibulum blandit congue neque ac bibendum. Proin at consequat tortor, id malesuada dolor.
Integer interdum purus sit amet leo venenatis, gravida porttitor ipsum eleifend. Donec venenatis maximus faucibus. Duis et magna vitae arcu malesuada sodales.</p>
</main>
OP here. Thank you, A Haworth, for the pointer to the !important user agent setting for writing-mode in Webkit. I knew that browsers had default styling, of course, but I didn't realize that some of that styling apparently could not be overridden with user specifications.
Your insight led me to give up on changing the writing-mode value for the <button>, as you suggest, and I approached the task by wrapping a <span> around the text inside my <button> and specifying the writing-mode for the <span>. The new version is at https://jsfiddle.net/djbpitt/gth3nck9/86/. HTML and CSS are copied below:
<div id="button">
<button>
<span>Rotate me!</span>
</button>
</div>
I had to do some additional fiddling with the CSS to get the rendering I wanted:
html {
height: 100%;
}
body {
display: flex;
flex-direction: row;
height: 100%;
margin-left: 0;
padding-left: 0;
}
body > * {
overflow-y: auto;
height: 100vh;
}
body > section {
flex: auto;
}
div#button {
display: flex;
flex: 0 0 1em;
border: none;
justify-content: center;
transform: rotate(180deg);
margin: 0 5px 0 0;
padding: 0;
overflow: visible;
}
button {
margin: auto;
border: 1px black solid;
border-radius: 10px 0 0 10px;
padding: 3px;
}
button > span {
writing-mode: vertical-lr;
width: 1em;
margin: 3px;
}
nav {
flex: 0 0 20em;
margin-right: 1em;
padding-right: 1em;
border-right: 1px gray solid;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
I have a div with rounded corners. It need to be scrollable.
I added the scrollbar but the corner of the scrollbar control is getting out of bound at the rounded corners of the div. Is there a way to set the margin of the scrollbar control? I was thinking of Top 10-15px and bottom 10-15px.
That is my div style:
div.consoleDiv {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
padding: 10px;
margin: -200px 0 0 -300px;
border: 2px solid #000;
border-radius: 15px;
-moz-border-radius: 15px;
background-color: black;
border-color: slategrey;
scrollbar-arrow-color: black;
scrollbar-3dlight-color: black;
scrollbar-track-color: black;
scrollbar-face-color: black;
scrollbar-shadow-color: lightgray;
scrollbar-base-color: lime;
overflow-y: auto;
}
I found a few solutions but they had zero impact on my scrollbar so far.
I tried those:
::-webkit-scrollbar {
width: 14px;
height: 18px;
}
::-webkit-scrollbar-thumb {
height: 6px;
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
-webkit-border-radius: 7px;
background-color: rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
You can apply a trick adding border radius to your scroll bar, it will fit as if it weren't overflowing its container... you will need to set the custom styles for your scroll..
div.consoleDiv {
position: absolute;
top: 10px;
left: 10px;
width: 300px;
height: 200px;
padding: 10px;
border: 2px solid #000;
border-radius: 15px;
-moz-border-radius: 15px;
background-color: black;
border-color: slategrey;
color:white;
overflow:scroll;
scrollbar-arrow-color: black;
scrollbar-3dlight-color: black;
scrollbar-track-color: black;
scrollbar-face-color: black;
scrollbar-shadow-color: lightgray;
scrollbar-base-color: lime;
overflow: auto;
}
div.consoleDiv::-webkit-scrollbar {
/* width: 14px;
height: 18px;*/
width:10px;
background:red;
margin-right:10px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
}
div.consoleDiv::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
}
<div class="consoleDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a tempor ligula, sed cursus lorem. Sed in urna id neque tincidunt viverra quis in enim. In ullamcorper eros nec dapibus sagittis. Praesent elementum orci dolor, ac blandit mauris placerat vitae. Duis finibus, nisi at imperdiet eleifend, lorem lacus rhoncus erat, eu dignissim elit ipsum at eros. Duis vehicula volutpat urna, vel ullamcorper neque fringilla ut. Fusce pellentesque faucibus egestas. Aenean non vulputate risus, vitae viverra metus. Praesent sit amet ligula nulla. Integer vel ex nibh. Duis placerat et urna eu imperdiet.
Fusce eget molestie lectus. Curabitur condimentum urna eget quam porta vestibulum. Integer elementum, sem vel aliquam feugiat, sem urna elementum augue, sed scelerisque est ligula eu sem. Aliquam et tellus eros. Cras egestas eleifend risus. Sed sit amet erat euismod, molestie felis quis, semper metus. Integer id dignissim nunc. Phasellus lacinia lectus et ex interdum bibendum. Maecenas convallis non nisi sit amet facilisis. In sit amet neque dapibus, pellentesque justo at, vehicula eros. Fusce mattis sollicitudin fermentum. Fusce justo ligula, malesuada quis est vel, ultrices posuere sem. Ut blandit elementum luctus.
Ut finibus arcu felis, quis semper dolor elementum quis. Suspendisse molestie ultricies ex eu bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec pulvinar semper viverra. Integer sit amet efficitur nibh. In egestas vel sapien sed volutpat. Nunc lorem neque, feugiat id eros in, dapibus ultricies ipsum. Curabitur eget lectus elit.
Cras orci turpis, finibus sit amet varius et, molestie nec velit. Nam mauris nisl, faucibus vitae aliquam id, vehicula id lorem. Nam feugiat id enim in sagittis. Mauris at turpis enim. Sed non ligula id nisi pellentesque blandit ut eget purus. Nam ut orci vitae orci dictum lobortis. Sed posuere ultrices posuere. Ut sodales est id elit laoreet commodo. Quisque viverra fermentum neque, quis congue nibh tristique eu. Curabitur cursus risus in scelerisque rhoncus. Nullam odio augue, lacinia nec interdum id, eleifend ut erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam tempor ut odio sit amet vulputate. Ut rhoncus cursus lectus, in laoreet diam dictum at. Nullam ut gravida lorem, a congue felis. In et arcu ultricies nulla laoreet convallis at vel odio.
Mauris ex lacus, mattis eu ipsum eu, semper pharetra purus. Vestibulum imperdiet rutrum lorem a bibendum. Curabitur ornare in est ac vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vitae bibendum libero, sed malesuada libero. Sed et urna quis justo imperdiet condimentum nec id purus. In placerat mi nibh, elementum finibus magna ullamcorper in. Vivamus nulla metus, condimentum non finibus sed, semper ac metus. Nunc accumsan nibh elit, sed fringilla risus lobortis ac.
</div>
I want to style a scrollbar with CSS, but I also want it to behave like OS X's native scrollbar (i.e. show only when scrolling, fade away when idle).
Is there a way to do that with pure CSS?
I don't think browsers let you have that much of control over the native UI with CSS only.
You would need to use JavaScript to manipulate scroll events. Luckily, you don't have to reinvent the wheel, consider the following plugin: http://enscrollplugin.com/
Uses jQuery
Control scrollbar appearance and fading with CSS
$('#scrollbox3').enscroll({
showOnHover: true,
verticalTrackClass: 'track3',
verticalHandleClass: 'handle3'
});
#scrollbox3 {
overflow: auto;
width: 400px;
height: 360px;
padding: 0 5px;
border: 1px solid #b7b7b7;
}
.track3 {
width: 10px;
background: rgba(0, 0, 0, 0);
margin-right: 2px;
border-radius: 10px;
-webkit-transition: background 250ms linear;
transition: background 250ms linear;
}
.track3:hover,
.track3.dragging {
background: #d9d9d9; /* Browsers without rgba support */
background: rgba(0, 0, 0, 0.15);
}
.handle3 {
width: 7px;
right: 0;
background: #999;
background: rgba(0, 0, 0, 0.4);
border-radius: 7px;
-webkit-transition: width 250ms;
transition: width 250ms;
}
.track3:hover .handle3,
.track3.dragging .handle3 {
width: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://enscrollplugin.com/releases/enscroll-0.6.1.min.js"></script>
<div id="scrollbox3">
<h1>New Scrolling Window</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus. Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
Source: http://jsfiddle.net/jstoudt/f2Y5S/