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
Related
I have a scrollbar on my page, I want to add a mix-blend-mode on
my scrollbar thumb, unfortunately the logical way
of going by this doesn't seem to work, or am I missing something?
heres a jsfiddle example of the problem
div {
height: 200px;
width: 100px;
overflow: auto;
}
::-webkit-scrollbar {
width: 50px;
}
/* Track */
::-webkit-scrollbar-track {
background-color: red;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: white;
mix-blend-mode: exclusion;
border: 1px solid black;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: lime;
}
As you can see,I have white on top of red which in theory should make the thumb cyan colored.
I want to have a scrollbar that has multiple colours, including the background.
I'm going for a Windows-XP style approach. Here's my current code I use to make the scrollbar 'blue'.
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #6699cc;
}
::-webkit-scrollbar-thumb:hover {
background: #8abbeb;
}
I think adding a border will do it, but I don't know how to add it.
Thanks a lot!
I think adding a border will do it, but I don't know how to add it.
if you want to add a border to it, you can use outline. you can add it to the track, thumb or wherever you want the border to be
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #6699cc;
outline: 5px solid red;
}
::-webkit-scrollbar-thumb:hover {
background: #8abbeb;
}
but sometimes it only shows the outline at the top and bottom idk why
an alternative will be using border
border: 5px solid red;
I'm not sure I've totally understood, but you already are putting background colors on the thumb and the actual bar so you can change to linear-gradient background images to get this sort of thing:
body {
height: 300vh;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #6699cc;
background: linear-gradient(red, blue, orange, cyan);
}
::-webkit-scrollbar-thumb:hover {
background: #8abbeb;
}
<body>A long body</body>
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
In console if I see, following classes are present:
html.sap-desktop ::-webkit-scrollbar {
width: 16px;
height: 16px;
background-color: #f7f7f7;
}
html.sap-desktop ::-webkit-scrollbar-corner {
background-color: #f7f7f7;
}
html.sap-desktop ::-webkit-scrollbar-thumb {
background-color: #e6e6e6;
}
I wanted to give blue color to scroll bar and change width. So this is what I did. Please tell if good idea, if not what other ways can be used.
.sapUiBody .sapMPageEnableScrolling::-webkit-scrollbar {
width: 6px;
}
.sapUiBody .sapMPageEnableScrolling::-webkit-scrollbar-track {
background-color: #ffffff;
border-radius: 5px;
}
.sapUiBody .sapMPageEnableScrolling::-webkit-scrollbar-thumb {
background-color: #005daa;
height: 3px !important;
}
One more issue I am facing is, when I hover over my scrollbar, it becomes grey.
Add the below CSS in your style sheet and update your colors
.sap-desktop ::-webkit-scrollbar {
width: 16px !important;
}
.sap-desktop ::-webkit-scrollbar-thumb {
background-color: #005483 !important;/* Update color */
}
.sap-desktop ::-webkit-scrollbar-thumb:hover { /* Scrollbar hover */
background-color: #d14900 !important; /* Update hover color */
}
Firt of all it is not a good idea to modify css classess directly..this will change all the instance of say scrollbar in your app...give a css class to parent and then modify the css
e.g
.parentCssClass .sap-desktop ::-webkit-scrollbar {
width: 16px !important;
}
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