I would like to make my scrollbar pass on my table and not let a space between the window.
My overflow-y: scroll is on a div.
https://image.noelshack.com/fichiers/2019/21/5/1558714720-capture.png
My scrollbar css :
::-webkit-scrollbar {
background-color: transparent;
width: 7px;
height: 7px;
}
/* Track */
::-webkit-scrollbar-track {
background-color: transparent;
}
#board::-webkit-scrollbar-track-piece {
background: rgba(0, 0, 0, 0.15);
}
::-webkit-scrollbar-track:hover {
background-color: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background-color: rgba(186, 186, 192, 0.4);
opacity: 0.4;
border-radius: 16px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(160, 160, 165, 0.85);
}
Do there is a way to do it pls? Seems like it's not really possible with only css but i don't want to use a plugin
Thanks
Related
This is my website: https://zarmdev.github.io/To-doz/index.html
When I hover over the +, it doesn't overlap the panes (the squares with text).
I gave it and it's parent a z-index of 10 and the panes a z-index of 0.
CSS for the pane
.pane {
background-color: rgb(192, 192, 192);
border: solid rgba(128, 128, 128, 0.463) 2px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 2vw;
font-family: 'Open Sans', sans-serif;
text-align: center;
border-radius: 2px;
width: 14ch;
height: 15ch;
mix-blend-mode: darken !important;
scrollbar-width: thin;
scrollbar-color: rgba(211, 211, 211, 0.404) rgba(255, 255, 255, 0), 0);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.7;
backdrop-filter: blur(30px);
z-index: 0; /* Z-index set here */
}
CSS for the dropdown
#dropdown {
position: relative;
display: inline-block;
z-index: 10;
}
#dropdown-content {
display: none;
position: absolute;
background-color: rgba(128, 128, 128, 0.534);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 8px 12px;
z-index: 10;
}
To see for yourself, first hover over the + button and press the other + button a few times.
When changing background color.
ALSO: When I try to hover on the other buttons, it disappears because it overlaps and thinks im hovering the pane.
Your #dropdown is partly transparent, that's why the stuff behind is visible: You defined background-color: rgba(128, 128, 128, 0.534); for it - the "0.534" value in there is the transparency value.
Change that value to avoid that.
Try change z-index property of your .pane class to value -1.
.pane {
background-color: rgb(192, 192, 192);
border: solid rgba(128, 128, 128, 0.463) 2px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 2vw;
font-family: 'Open Sans', sans-serif;
text-align: center;
border-radius: 2px;
width: 14ch;
height: 15ch;
mix-blend-mode: darken !important;
scrollbar-width: thin;
scrollbar-color: rgba(211, 211, 211, 0.404) rgba(255, 255, 255, 0), 0);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.7;
backdrop-filter: blur(30px);
z-index: -1; /* Z-index set here */
}
Check here a tuto with dinamic and online examples:
z-index tutorial and examples
as a complementary solution, in the screenshot it is seen that applying z-index -1 works
the solution with z-index: -1 worked for me
I have make thin scrollbar in Firefox for this css:
scrollbar-width: thin;
scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
it's worked for firefox.
Now i need to make thin scrollbar in chrome.
I have tried this css
*-webkit-scrollbar {
width: 9px;
}
*-webkit-scrollbar-track {
background: transparent;
}
*-webkit-scrollbar-thumb {
background-color: rgba(155, 155, 155, 0.5);
border-radius: 20px;
border: transparent;
}
But this code does not work in chrome.
Any suggestion please.
Try this:-
::-webkit-scrollbar {
width: 9px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: rgba(155, 155, 155, 0.5);
border-radius: 20px;
border: transparent;
}
chrome://flags/
Overlay Scrollbars = Enabled
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'm trying to scale the thumb on the scrollbar and I can't change it's with and height also I wanna make it bigger than the scrollbar itself.
I have tried to add transparent borders to making the thumb smaller also adding a left border to show it outside the scrollbar. (first one for default mode and the second for :hover mode)
but it's not working
::-webkit-scrollbar {
width: 20px;
/*it's not helping with showing the thumb border-left*/
overflow: auto;
}
::-webkit-scrollbar-track {
background: linear-gradient(rgba(0, 0, 139, 0.7), rgba(0, 100, 0, 0.8));
overflow: auto;
}
::-webkit-scrollbar-thumb{
background: rgba(255, 255, 255, 0.7);
border-radius: 3px;
/*doesnt work (the goal is making thumb thinner)*/
border: transparent 5px solid;
overflow: auto;
}
::-webkit-scrollbar-thumb:hover{
/*doesnt work (the goal is make it bigger than scrollbar itself)*/
transform: scale(1.5);
border-left: 10px rgba(255, 255, 255, 0.7) solid;
}
<body style="height : 700px;">
</body>
try it yourself here
I expect a scrollbar with gradient background-color and a smaller thumb that when is on hover (:hover) it will get bigger than scrollbar.
can you help me?
To make thumb thinner use: background-clip: padding-box then add some padding to the thumb and this should work fine.
Then to make it wider when hovering remove padding-box by adding: background-clip: initial;
Note that There is no way to make thumb wider than scrollbar
Working Demo:
body {
height: 2000px;
}
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background: linear-gradient(rgba(0, 0, 139, 0.7), rgba(0, 100, 0, 0.8));
overflow: auto;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.7);
overflow: auto;
border: 5px solid transparent;
background-clip: padding-box;
border-radius: 20px;
transition: height 0.2s ease-in-out;
padding: 5px;
}
::-webkit-scrollbar-thumb:hover {
background-clip: initial;
}
An onClick and hover dropdown menu in pure CSS (no JavaScript) displays the items at first, but the menu doesn't stay open when I put my mouse over the dropdown items (but it does stay open onClick).
Here it is:
.acn-menu {
text-align: center;
background-color: rgba(0, 0, 0, 0.9);
}
.label_openclose {
display: none;
}
.menu-tabs {
height: 100%;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
}
#media (min-width: 320px) {
.menu-tabs {
position: absolute;
}
}
.menu-tabs .elem {
box-sizing: border-box;
padding: 0 20px;
float: left;
height: 100%;
line-height: 70px;
background-color: rgb(30, 30, 30);
color: white;
}
.menu-check {
display: none;
}
label {
margin-bottom: 0;
}
.label_openclose {
display: inline-block;
width: 60px;
min-height: 50px;
background-color: transparent;
cursor: pointer;
overflow:hidden;
display:block;
}
.menu-tabs .elem {
line-height: initial;
float: initial;
height: 0px;
cursor: pointer;
border-top: 0px solid #000;
overflow: hidden;
}
.menu-check:checked~.menu-tabs .elem {
height: 25px;
color: white;
border-top: 2px solid rgba(255, 255, 255, 0.2);
}
.label_openclose:hover~.menu-tabs .elem {
border-top: 2px solid rgba(255, 255, 255, 0.2);
height: 25px;
}
Here is a fiddle:
https://jsfiddle.net/Lwjvwcva/
You have to add a rule that tells the browser to show .menu-tabs while hovering on it, so I added this rule:
.label_openclose~.menu-tabs:hover .elem {
border-top: 2px solid rgba(255, 255, 255, 0.2);
height: 25px;
}
check the updated fiddle here.
hope this helps :)
In order for the submenu to remain open, the item where the submenu sits INSIDE needs to be the one selected on hover. In this case .acn-menu or .nav (I used .nav in my code). To make the hover submenu stay open, I removed and added a few lines in the css:
Removed:
.label_openclose:hover~.menu-tabs .elem {
border-top: 2px solid rgba(255, 255, 255, 0.2);
height: 25px;
}
Added:
.nav .menu-tabs {
display:none;
}
.nav:hover .menu-tabs {
display:block;
}
.menu-tabs .elem {
height:25px;
border-top: 2px solid rgba(255, 255, 255, 0.2);
}