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>
Related
I have a stylized scrollbar with a transparent background. However, when scrolling appears on x and y, it becomes a square as shown in the Image. how do i solve this?
I thought it was the button, ::-webkit-scrollbar-button, but it didn't work.
scroll bar code:
/* custom scrollbar */
::-webkit-scrollbar {
width: 10px;
height:10px;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #04397e;
border-radius: 20px;
border: 0px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: #01093a;
}
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 have changed overflow CSS but my app design is dark, so I can see white rectangular where both scroll bars converge. How to hide it?
::-webkit-scrollbar {
width: 20px;
cursor: pointer;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #edde5d;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #f09819;
}
Use this CSS as per your convenience, it would work fine :
::-webkit-scrollbar-corner {
background: rgba(0,0,0,0); // transparent or any other color you want
}
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;
}
I want to change the scrollbar width wider, so it looks clear when user hover on it.
So I wrote:
::-webkit-scrollbar {
width: 7px;
height: 7px;
background-color: #ddd;
}
::-webkit-scrollbar:hover {
width: 10px;
height: 10px;
background-color: red;
}
The background color changed to red, but not the width, Is there anyway to solve this?
Here is plnkr
*:hover::-webkit-scrollbar {
width: 10px;
height: 10px;
}
This will change the width and height of any element's scrollbar. If you want to be more specific, just exchange the '*' to a selector of your choice. For instance, to apply it to scrollbars of elements with the class of 'my-custom-scrollbar':
.my-custom-scrollbar:hover::-webkit-scrollbar {
width: 10px;
height: 10px;
}
You can achieve that by using border instead of width:
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-thumb {
background: #ababab;
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box; // <== make the border work
}
::-webkit-scrollbar-thumb:hover{
border: 0;
}
::-webkit-scrollbar-track {
background: transparent;
}
this is a workaround I used using mousemove event:
document.addEventListener("mousemove", function(e){
let ele = document.getElementById('element');
let distance = ele.offsetLeft + ele.offsetWidth - e.pageX;
distance < 15 && distance > -15 ? ele.classList.add('more-width') : ele.classList.remove('more-width');
});
and styling would be
#element::-webkit-scrollbar-thumb {
background: #888;
}
#element::-webkit-scrollbar {
width: 5px;
}
#element.more-width::-webkit-scrollbar {
width: 10px;
}
codepen sample: https://codepen.io/KhaleD_D/pen/OJpgJKM
This solution uses scrollbar which is natively 16px large, but we show only 6px to make it thinner (and leave more space for content). But the trick is overflow: overlay which allows content to be displayed even over scrollbar area.
Using this approach you have thin scrollbar which enlarges on hover (and the hover are is a bit wider).
I got inspired by Khaled's solution, but I used CSS only approach:
.custom-scrollbar {
scrollbar-color: var(--gray) var(--secondary);
scrollbar-width: thin;
overflow: overlay !important;
}
.custom-scrollbar::-webkit-scrollbar {
width: 16px;
height: 16px;
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-track-piece {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb:vertical {
background: linear-gradient(to left, var(--gray) 6px, transparent 0%);
}
.custom-scrollbar::-webkit-scrollbar-thumb:horizontal {
background: linear-gradient(to bottom, var(--gray) 6px, transparent 0%);
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: var(--gray);
}
I use following code to achieve increase width on hover effect.
Sadly, its working on Chrome and Edge only. My apologies for incorrect formatting.
* {
&::-webkit-scrollbar-thumb {
border: 5px solid transparent;
border-radius: 10px;
background-color: grey;
background-clip: content-box;
-webkit-background-clip: content-box;
}
&::-webkit-scrollbar-thumb:hover {
background-color: black;
background-clip: border-box;
-webkit-background-clip: border-box;
}
&::-webkit-scrollbar {
width: 16px;
height: 16px;
background-color: transparent;
}
}