Basically I created a website using htl and css, and am now porting it to react. However when I came to the scrollbar, I cannot work out how to make the background of it transparent. Here's my code,
::-webkit-scrollbar {
width: 10px;
background: transparent;
overflow: hidden;
}
::-webkit-scrollbar-track {
border-radius: 5px;
background: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background: transparent;
background-color:#94f211;
}
Following will help:
::-webkit-scrollbar-thumb {
background: #0000;
}
Related
Is there a way to replicate YouTube's custom scrollbar?
Desired effect:
It seems like ::webkit-scrollbar-thumb has a left and right padding to achieve that effect.
I have tried the following:
* {
margin: 0;
padding: 0;
::-webkit-scrollbar {
background: #181818;
width: 12px;
}
::-webkit-scrollbar-thumb {
padding: 0 4px; // This was supposed to do the trick
background: #909090;
border-radius: 100px;
&:hover {
background: #606060;
}
}
}
But it doesn't work...
Result:
Any ideas how to achieve the desired effect? Thanks in advance.
You could try faking the padding with background-clip: padding-box and applying a transparent border-right and left.
::-webkit-scrollbar {
background: #181818;
width: 20px;
}
::-webkit-scrollbar-thumb {
padding: 0 4px;
border-right:4px solid transparent;
border-left:4px solid transparent;
background: #909090;
background-clip: padding-box;
border-radius: 100px;
&:hover {
background: #606060;
}
}
html,
body {
height: 300%;
}
Can anyone please tell me how to adjust the height of the scrollbar thumb?
I have tried many different things like
::-webkit-scrollbar-thumb {
height: 10px;
}
::-webkit-scrollbar-thumb {
max-height: 200px;
}
::-webkit-scrollbar-thumb {
margin-top: 10px;
margin-bottom: 10px;
}
I have also read this answer Change scrollbar height and How to change the height of a scrollbar thumb? but it didn't work. Some people in the answers said that it is not possible to change the height on the scrollbar thumb then how this site https://css-tricks.com/custom-scrollbars-in-webkit/ is doing it?
My current code is
body {
height: 110vh;
}
::-webkit-scrollbar {
width: 1rem;
}
::-webkit-scrollbar-track {
background: rgb(24, 24, 24);
}
::-webkit-scrollbar-thumb {
background-color: #3EECAC;
background-image: linear-gradient(19deg, #3EECAC 0%, #EE74E1 100%);
border-radius: 1rem;
}
It's not supported on your browser then:
Ask this:
Are you on firefox?
Does the scrollbar change in stackoverflow: Change scrollbar height
(Do the answers scrollbars change?)
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
h1 {
font-size: 1000px;
}
<h1>Test</h1>
I really doubt what I am asking is possible but it's still worth a try.
I am trying to create a button that normally has background-color: transparent; color: white; and when you hover over it, those properties should swap. The problem is that if you just swap them then all you see is a white button. If you know the background colour of the containing element then you can get the colour from there but If the button is over an image or a canvas then this won't work.
This is how I've been doing it so far
html,
body {
height: 100%;
}
#container {
background-color: #38404D;
height: 100%;
}
.ghost-button {
background-color: transparent;
border: 1px solid #ffffff;
outline: none !important;
transition: all 0.8s;
margin: 10px 10px;
padding: 6px 7px;
cursor: pointer;
color: #ffffff;
}
.ghost-button:hover {
background-color: #ffffff;
color: #38404D;
}
.ghost-button:active {
box-shadow: inset 0 0 8px 0px #888888;
}
<div id="container">
<button class="ghost-button">Hover Here</button>
</div>
UPDATE
It seems that quite a few people were confused by the question. I am asking if there is a way to do the exact same thing I've done above but on top of an image or a canvas (instead of a solid colour). See example below
html,
body {
height: 100%;
}
#container {
background-image: url("http://www.freegreatpicture.com/files/147/17878-hd-color-background-wallpaper.jpg");
height: 100%;
}
.ghost-button {
background-color: transparent;
border: 1px solid #ffffff;
outline: none !important;
transition: all 0.8s;
margin: 10px 10px;
padding: 6px 7px;
cursor: pointer;
color: #ffffff;
}
.ghost-button:hover {
background-color: #ffffff;
color: #38404D;
}
.ghost-button:active {
box-shadow: inset 0 0 8px 0px #888888;
}
<div id="container">
<button class="ghost-button">Hover Here</button>
</div>
Yes, it IS possible in CSS with mix-blend-mode.
Answer's update in April 2021: Currently it have a very solid support (95% globally) although Safari doesn't have hue, saturation, color, and luminosity blend modes. Of course, IE isn't a considerable thing if you expect to use it (like many of other cool CSS features of the last years).
.ghost-button {
/* Important part */
mix-blend-mode: screen;
background: #000;
color: #fff;
/* Button cosmetics */
border: .125em solid #fff;
font: 2em/1 Cursive;
letter-spacing: 1px;
outline: none !important;
transition: all .8s;
padding: .5em 1em;
cursor: pointer;
}
.ghost-button:hover {
/* Important part */
background: #fff;
color: #000;
}
#container {
background: url('http://www.freegreatpicture.com/files/147/17878-hd-color-background-wallpaper.jpg') center/cover;
/* Also works with background-color or gradients: */
/* background: linear-gradient(to right, red, yellow); */
/* Container positioning */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
html, body {
margin: 0;
}
<div id="container">
<button class="ghost-button">Hover Here</button>
</div>
As you can see, the secret here is using mix-blend-mode: screen along with the black color for the "erased" part, since black is mixed with the background when using this screen mode.
No, it isn't possible in CSS! You could try to set the color with JS to mimic this effect.
body {
height: 100%;
}
#container {
background-color: #38404D;
height: 100%;
}
.ghost-button {
background-color: transparent;
border: 1px solid #ffffff;
outline: none !important;
transition: all 0.8s;
margin: 10px 10px;
padding: 6px 7px;
cursor: pointer;
color: #ffffff;
}
.ghost-button:hover {
background-color: none;
color: red;
}
.ghost-button:active {
box-shadow: inset 0 0 8px 0px #888888;
}
<div id="container">
<button class="ghost-button">Hover Here</button>
</div>
hover color is set to red you can update it.
Good evening! I just wanna to change my scroll like this.
So it looks like that track is hidden. I got my style like this
::-webkit-scrollbar{
width: 15px;
height: 40px;
}
::-webkit-scrollbar-thumb{
background-color: #DBDBDB;
border: 4px solid transparent;
border-radius: 11px;
background-clip: content-box;
}
::-webkit-scrollbar * {
background: transparent;
}
::-webkit-scrollbar-thumb:vertical {
height: 90px;
}
And I got such result:
So there is a question. How can I do this with CSS or JS maybe.
Thanks
I think this might work:
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(,0,0,0.5);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
You might have to edit it according to your need.
here to save the day, you must first add overflow: overlay; to your body tag, works the same as overflow: auto; but it will be on top of the content instead of on its side.
then just add this:
*::-webkit-scrollbar {
background-color: transparent;
width: 12px;
}
*::-webkit-scrollbar-track {
background-color: transparent;
}
*::-webkit-scrollbar-thumb {
border-radius: 20px;
border: 3px solid transparent;
background-color: rgba(0,0,0,0.3);
background-clip: content-box;
}
and adjust the color and the width to your liking, your welcome!
Fiddle
I am using ::-webkit-scrollbar to make a custom scrollbar in Chrome. I have a border-radius: 10px and in doing that, there are white corners at the top:
Sorry, it's kinda hard to see since it's a scrollbar.
I want the corners to be the same color as the header div (#dadae3). Is there any way to get rid of the white corners using CSS only without changing the styles of the scrollbar?
CSS (entire):
body {
padding: 0;
margin: 0
}
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-track {
background: #ffffff;
border-radius: 10px;
border: 1px solid #aeaeb5
}
::-webkit-scrollbar-thumb {
background: #dadae3;
border-radius: 10px;
border: 1px solid #aeaeb5
}
::-webkit-scrollbar-thumb:hover {
background: #c4c4cc
}
::-webkit-scrollbar-thumb:active {
background: #aeaeb5
}
HTML:
<div style='background: #dadae3; width: 100%; height: 30px;'></div>
<div style='width: 100%; height: 1000px'></div>
You have to set the ::-webkit-scrollbar-corner pseudo-element, e.g.
::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); }
You can set the background-color property for the pseudo-element -webkit-scrollbar, doing that you can set the "corner color".
I was fighting this scrollbar-corner today, which takes space and creates unneeded gap. If I use overflow: auto on container this scrollbar corner completely disappears while scrollbar itself remains visible.
I had to customize webkit-scrollbar-corner as colored triangle instead of square.
Here is the result how to do it. With border trick.
::-webkit-scrollbar-corner {
background: transparent;
width: 0;
height: 0;
border-left: 16px solid #8B7E79;
border-top: 16px solid #8B7E79;
border-bottom: 16px solid transparent;
border-right: 16px solid transparent;
}
Try with this
::-webkit-scrollbar-corner {
background: transparent;
width: 0;
height: 0;
border-left: 16px solid #8B7E79;
border-top: 16px solid #8B7E79;
border-bottom: 16px solid transparent;
border-right: 16px solid transparent;
}