Here is my fiddle : SCROLLBAR
Run the fiddle in both Chrome and Firefox browsers, hit the "Toggle" button to see custom CSS not being applied for scroll bar in Firefox browser.
Is there a way I can display the custom scroll bar in all browsers?
::-webkit-scrollbar {
width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 100px;
border-radius: 100px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 100px;
border-radius: 100px;
background: #c1bdbe;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: #555D69;
}
Any help would be much appreciated.
Thank you.
Firefox doesn't support custom scrollbars yet so there's no way to do this in css.
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
You have to use JavaScript to have global style on all browsers.
Related
I have a pre that scroll-able
As you can see my site is in a darkmode, and that white scroll is ruined it.
I've tried
pre {
background-color: #323338;
scrollbar-color: #323338 black;
}
somehow it's not taking any effects.
Any hints for me ?
Try # 2
<pre class="syslogs" style="overflow-y:auto; height: 500px;"> {{ $logs }} </pre>
.syslogs {
scrollbar-color: #323338 black;
}
Try this:
::-webkit-scrollbar {
width: 6px;
background-color: #f5f5f5;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
background-color: #323338;
}
You need to add a custom styling for your scrollbars.
Note that it's not going to work across all browsers, but it will let you improve their style in Chrome and Firefox.
I have a div with overflow: auto
.div {
overflow: auto;
}
and when i try to set the styles for the scrollbar, it doesnt work:
.div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
.div::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.div::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #555;
}
i tryed targeting with class, id, even the tag, but nothing works.
when i don't target anything before ::-webkit-scrollbar styles, the browser scrollbar acquires the styles, but i want to style the div scrollbar
I think you should use one of javascript plugin to display custom scroll bars. Not all browsers support that what you wrote in your question.
custom scrollbars examples
I have an issue where on my page scrollbars aren't appearing in Chrome on a Mac (haven't tried on a PC). It does work okay in Firefox however.
I've tried the following...
::-webkit-scrollbar {
all: unset;
display: block;
}
To no avail
Looks like the expected behaviour to me, idle scrollbars are invisible on macOS, you can try the following to make them always visible.
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
I've created a custom scrollbar style, and I want to be able to "grab" it with Chrome Android (by tap and dragging on it). It works on the desktop, but with mobile emulation but can't get it.
I've created a JS Fiddle with it here:
https://jsfiddle.net/dr8g4g6k/2/
Code:
#container {
overflow: auto;
width: 250px;
height: 250px;
}
#content {
width: 1000px;
height: 1000px;
}
/* Webkit */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #F2F2F2;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 0px;
border-radius: 0px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background: #999999;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(205, 205, 205, 0.4);
}
<div id="container">
<div id="content">
test content
</div>
</div>
If you enable Chrome emulation with any device set, and try to scroll by grabbing the scroll bar, you cannot.
You can really use any site to replicate it that has custom webkit scrollbars, even this example here:
https://css-tricks.com/examples/WebKitScrollbars/
Simply enable mobile emulation and you can't grab it.
Does anyone know how to have custom scrollbars which are always present on Chrome, and still able to "grab" them to scroll like the native ones?
To anyone else coming across this: Chrome team has decided this is not something they will fix because they don't like custom scrollbars, and because they say that Android being unable to 'grab' scrollbars is by design in general.
So the only answer is to stop using custom scrollbars altogether, since attempting to apply a class to do it on whether it's "mobile" or not is a very bad solution.
I am using -moz-border-top-colors for multiple border.
It works fine for Mozilla ,but
It does not work in other browsers.
however, I used -webkit ,still It did not work in Chrome.
this feature is supported by firefox only ... but you can use multiple shadows as a more cross-browser
solution
.box {
margin-top: 40px;
height: 200px;
width: 200px;
background: #ddd;
border-top: 3px solid blue;
/* custom borders */
box-shadow: 0 -3px 0 0 green,
0 -6px 0 0 black,
0 -9px 0 0 yellow,
0 -12px 0 0 skyblue;
}
check this link for more infos http://jsfiddle.net/8htrkqzb/
According to https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-border-top-colors this property is only supported in Firefox.