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;
}
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 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
}
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;
}
}
I'm trying to write a user style for this page using Stylish in Firefox 27.0.1. The stylesheet I have so far is:
#-moz-document domain("www.hitbox.tv") {
/***** Change stream area colours *****/
.meta, /* title and tabs */
.userContent.cf /* share buttons */
{
background: none !important; /* remove white gradient */
background-color: #000 !important;
color: #AAA !important;
border-bottom: none !important; /* remove white separator */
}
.title, /* stream title */
.hover, /* tabs and buttons below title */
.profile * /* profile text */
{
color: #AAA !important;
}
.btns .active /* currently selected tab */
{
color: #484 !important;
}
button {
background: #000 !important;
color: #AAA !important;
border-top: 2px #AAA solid !important;
border-right: 2px #AAA solid !important;
border-bottom: 2px #888 solid !important;
border-left: 2px #888 solid !important;
}
/***** Push video down the page *****/
.player {
padding-top: 100px !important;
}
/***** Make video occupy all available space *****/
#player {
width: 100% !important;
/* height: 100% !important; */
}
} /* #-moz-document */
The issue is with the very last rule, that should affect the "follow" button below the stream title. (In my case it's a "following" button, but the rule should affect it either way.) None of the styles applied to it are having any effect. However if I comment out any one of the "border" styles, the other s(including "background" and "color") suddenly work. Specifying simply border: 2px #AAA solid !important; also causes the entire rule to be ignored. What's going on here?