I need to customize only the width of the scrollbars of Chrome browser using CSS, but need rest of things (like hover effect, color on hover, scrollbar track color, scrollbar button color etc, color of scrollbar on click etc.) as it is.
How can I do it?
I know that we can change the width of the scrollbar using following css:
::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
You can do like that
::-webkit-scrollbar is for the entire scrollbar
handle is scrollbar where you can add background like that and apply also pseudo elements or the draggable scrolling handle.
track is the progress bar of the scrollbar.
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #1B242F;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #04C2C9;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover{
background: #04C2;
}
For more info visit this link
Related
I changed the css properties of the scrollbar and the buttons disappeared. When I added this to my stylesheet:
::-webkit-scrollbar-button {
display: block;
}
the scrollbar had two rectangles on the top and buttom but there were no arrows. When I tried clicking the top and bottom parts of each of the rectangles, it scrolled up and down. Is there a way to add only one button on each side (top and bottom) that have arrows?
CSS:
/* Properties of Scrollbar */
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background: #4d4d4d;
}
::-webkit-scrollbar-button {
display: block;
}
::-webkit-scrollbar-thumb {
background: #8d8d8d;
}
::-webkit-scrollbar-thumb:hover {
background: #2b2b2b;
}
You're using ::-webkit-scrollbar-button wrong. It's supposed to be used like this:
::-webkit-scrollbar-button {
background: blue;
}
This could also be found here
I currently have a custom scrollbar like below. My page has 5 scrollable elements. How do I only have one scrollbar show up when scrolling that element while hiding the rest?
/*custom scrollbar*/
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background-color: rgba(50, 50, 50, 0.1);
-webkit-border-radius: 8px;
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: rgba(50, 50, 50, 0.2);
}
::-webkit-scrollbar-track:window-inactive {
background: transparent;
}
::-webkit-scrollbar-thumb:window-inactive {
background: transparent;
}
You can use the CSS property overflow: auto. This will only show the scrollbars when they're needed
You can hide all scrollbars with:
body { overflow: hidden }
As you indicate 'auto' shows scrollbars if content overflows.
I have never tried it but it may be possible to use JavaScript to get closer to what you describe but I have serious doubts about the ergonomics of such a design.
How to hide QScrollBar arrows?
I need to hide in horizontal scrollbar.
I was trying to hide with setStyleSheet:
setStyleSheet(" QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal { height:0px; }" )
but it doesn't work.
If you need to hide just the arrows inside buttons then you can try to set background and border in this way:
QScrollBar::right-arrow:horizontal, QScrollBar::left-arrow:horizontal
{
border: none;
background: none;
color: none;
}
If you want to hide whole buttons then you go with code below.
QScrollBar::add-line:horizontal {
border: none;
background: none;
}
QScrollBar::sub-line:horizontal {
border: none;
background: none;
}
I know this is an old question, but I've ran into an issue with this question's approved answer, and I've found a fix for it so I'm going to leave this here in case someone runs into the same problem that I did.
While the accepted answer suggests setting border, background and color to none, this only visually hides the scrollbar arrows. What I mean by this is that you can still click them, and the scrollbar's handle, while it can move to the place they occupied, can not be clicked on if your cursor is in the area the arrow buttons occupied.
To also functionally hide them, you should set their width and height styles to 0px as well. This will make it so you can click on the handle if the scrollbar's handle is in the area the arrow-buttons occupied.
In order to hide a scroll bar you can set the scroll bar policy for that particular scroll bar (horizontal in your case). For example:
QScrollBar scrollBar;
scrollBar.setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
Create a QScrollBar and assign it this stylesheet and this should do the trick. See example below.
QScrollBar:vertical {
width: 15px;
background: #f1f1f1;
}
QScrollBar::handle:vertical {
background: #888;
}
QScrollBar::add-line:vertical {
border: 2px solid gray;
background: #f1f1f1;
}
QScrollBar::sub-line:horizontal {
border: 2px solid gray;
background: #f1f1f1;
}
QScrollBar::handle:hover:vertical {
background: #555;
}
I am new to pseudo-elements that are prefixed with a double colon. I came across a blog article discussing styling of scrollbars using some webkit only css. Can the pseudo-element CSS be applied to individual elements?
/* This works by applying style to all scroll bars in window */
::-webkit-scrollbar {
width: 12px;
}
/* This does not apply the scrollbar to anything */
div ::-webkit-scrollbar {
width: 12px;
}
In this fiddle, I would like to make the div's scrollbar customized, but the main window's scrollbar stay at the default.
http://jsfiddle.net/mrtsherman/4xMUB/1/
Your idea was correct. However, the notation div ::-webkit-scrollbar with a space after div is actually the same as div *::-webkit-scrollbar; this selector means "scrollbar of any element inside <div>". Use div::-webkit-scrollbar.
See demo at http://jsfiddle.net/4xMUB/2/
I want to use a class selector for using a custom scrollbar.
Somehow .foo::-webkit doesn't work, but I figured out that div.foo::-webkit does work! Those ##$$*## pseudo-things....
See http://jsfiddle.net/QcqBM/16/
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/
You can have a scss file and apply the style to a class there
style.scss
.myscrollbar {
::-webkit-scrollbar {
width: 13px;
height: 13px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(13deg, #f9d4ff 14%, #c7ceff 64%);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(13deg, #c7ceff 14%, #f9d4ff 64%);
}
::-webkit-scrollbar-track {
background: #ffffff;
border-radius: 10px;
box-shadow: inset 7px 10px 12px #f0f0f0;
}
}
home.html
<div class="myscrollbar">
put your contents here
</div>
I used the scrollbar generator here: https://w3generator.com/scrollbar
Is there anyway to control the styling of the scrollbars of a div tag? I am experiencing some contrast issues between IE7 and FireFox 3.5.2. Any help would be greatly appreciated!
Using javascript you can style the scroll bars. Which works fine in IE as well as FF.
Check the below links
From Twinhelix
,
Example 2
,
Example 3
[or] you can find some 30 type of scroll style types by click the below link
30 scrolling techniques
No, you can't in Firefox, Safari, etc. You can in Internet Explorer. There are several scripts out there that will allow you to make a scroll bar.
This one does well its scrolling job. It's very easy to understand, just really few lines of code, well written and totally readable.
Looking at the web I find some simple way to style scrollbars.
This is THE guy!
http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task
And here my implementation!
https://dl.dropbox.com/u/1471066/cloudBI/cssScrollbars.png
/* Turn on a 13x13 scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 13px;
}
::-webkit-scrollbar-button:vertical {
background-color: silver;
border: 1px solid gray;
}
/* Turn on single button up on top, and down on bottom */
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: block;
}
/* Turn off the down area up on top, and up area on bottom */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:vertical:increment {
display: none;
}
/* Place The scroll up button at the up */
::-webkit-scrollbar-button:vertical:decrement {
display: none;
}
/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:horizontal:increment {
display: none;
}
/* Place The scroll up button at the up */
::-webkit-scrollbar-button:horizontal:decrement {
display: none;
}
::-webkit-scrollbar-track:vertical {
background-color: blue;
border: 1px dashed pink;
}
/* Top area above thumb and below up button */
::-webkit-scrollbar-track-piece:vertical:start {
border: 0px;
}
/* Bottom area below thumb and down button */
::-webkit-scrollbar-track-piece:vertical:end {
border: 0px;
}
/* Track below and above */
::-webkit-scrollbar-track-piece {
background-color: silver;
}
/* The thumb itself */
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: gray;
}
/* The thumb itself */
::-webkit-scrollbar-thumb:horizontal {
height: 50px;
background-color: gray;
}
/* Corner */
::-webkit-scrollbar-corner:vertical {
background-color: black;
}
/* Resizer */
::-webkit-scrollbar-resizer:vertical {
background-color: gray;
}
There's also the iScroll project which allows you to style the scrollbars plus get it to work with touch devices. http://cubiq.org/iscroll-4