I'm trying to share some knowledge by posting some css tricks questions(and jquery tricks in another topics) and answer it.
Here I'm dealing with styling the scrollbar for google chrome browser.
Just add these CSS rules:
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer
Here's what each rule does:
Here is a simple example of a customized scrollbar using css
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Here is how it will look.
ref: https://css-tricks.com/custom-scrollbars-in-webkit/
Related
I have some overflowing horizontal content and want to have a scrollbar visible always to support Windows devices, but I don't want scrollbars anywhere else. `
::-webkit-scrollbar {
display: none;
}
.polls-row::-webkit-scrollbar {
height: 1rem;
}
.polls-row::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.polls-row::-webkit-scrollbar-thumb {
background-color: $color-border;
border-radius: $radius;
outline: 1px solid slategrey;
}
I have this CSS/sass, which I think should work because the class has higher specificity, however I still don't get a scrollbar on .polls-row
How can I do this?
Update your code with below css
::-webkit-scrollbar {
overflow:hidden;
}
Right Way -> ::-webkit-scrollbar{ overflow:hidden; }
Wrong Way -> ::-webkit-scrollbar{ display:none; }
I want to apply a minimalistic stye instead of the default scrollbar chrome has, is it possible to add custom styles to an element's specifically, preferably without jquery.
To make a really simple custom scrollbar you could do this:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Customize values if you want.
i have the following code that customizes a webkit scroll bar....
/*webkit scroll bar*/
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0);
}
what i would like to do is customize the scrollbar of a page loaded in firefox the same way... for which i tried the following code..
/*mozilla scroll bar*/
::-moz-scrollbar {
width: 6px;
}
::-moz-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-moz-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-moz-scrollbar-thumb:window-inactive {
background: rgba(255,0,0);
}
but it does not work..... how can i customize the scrollbar in the same way i did for webkit... any help would be appreciated... thanks in advance... :)
You can't because of bug #77790 (Link#1).
Bug 77790 - (scrollbar-colors) Style the scrollbar (binding ::-moz-horizontal-scrollbar to XBL)\
The only way is to use jQuery. I don't know how to code it, so don't ask me. I prepared the following links for jQuery scrollbars. Click here!(Link#2)
Links:
https://bugzilla.mozilla.org/show_bug.cgi?id=77790
http://plugins.jquery.com/custom-scrollbar/
FireFox support these two:
scrollbar-width : auto|thin|none...
scrollbar-color
for firefox now you can use this
.element{
scrollbar-width: thin;
scrollbar-color: blue transparent;
}
where blue is for the thumb and transparent for the track
I have a css code likes
.scrollPanel
{
height: 100px;
width: auto;
position: absolute;
overflow: scroll;
}
You can see my example Here !
What I want to know is how to change the style of scroll bar ?
How can I set css style to it ?
As of now there's no cross browser solution to change the scroll bars with CSS ONLY, alternatively you can use jQuery to style them.
Solution for webkit browsers only
Demo
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Credits
You can complete the webkit solution from Mr. Alien with the styling elements for IE too, but just the colors so far I know.
Here is the documentation about it
As its said before, there are no CSS only solution for all browsers.
All I want to know is if it is possible to have multiple custom made -webkit-scrollbars on the same page.. I making some divs color specific, like one div has green text and images and another blue etc. So I would like to make a custom scrollbar for each div so it matches the color..
Q1: Is it possible?
Q2: If so, how would I do it?
I have thought about one solution, but I think it is a bit cumbersome. One solution may be to make each div containing an iframe and then create separate pages with the unique scrollbars, but I don't know if that is going to work either..
Of course you can - simply prepend the scrollbar pseudo-classes with your intended selectors, i.e.:
::-webkit-scrollbar-track {
background-color: #333;
}
/* Override styles for <div>s, for example */
div::-webkit-scrollbar-track {
background-color: #b13131;
}
I have made a simple example for you here - http://jsfiddle.net/teddyrised/Nsz93/
You can also apply these rules by id of the element. Let's say scroll bar of a div has to be styled which has an id "myDivId". Then you can do following. This way you can use different styles for scroll bars of different elements.
#myDivId::-webkit-scrollbar {
width: 12px;
}
#myDivId::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
#myDivId::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
http://jsfiddle.net/QcqBM/516/
It's possible using either a jquery plugin or simply styling the scrollbars w/ css. This can be done in webkit and ie.
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
http://jsfiddle.net/jeffpowrs/nEkPw/
http://css-tricks.com/custom-scrollbars-in-webkit/
Here's the solution
div::-webkit-scrollbar {
width: 0.5em;
border-radius: 5px;
}
div::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px #f8fbff;
border-radius: 5px;
}
div::-webkit-scrollbar-thumb {
background-color: #9fa9bd;
border-radius: 5px;
}