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.
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 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>
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;
}
}
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