I have styled scrollbar of element on chrome using
aside::-webkit-scrollbar {
width: 5px;
color: skyblue;
}
aside::-moz-scrollbar {
width: 5px;
color: skyblue;
}
aside::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
aside::-moz-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
aside::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
aside::-moz-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
aside::-webkit-scrollbar-thumb{
background: skyblue;
}
aside::-moz-scrollbar-thumb{
background: skyblue;
}
as I tried to implement same thing on Firefox I found out Mozilla no more supports old styling scrollbar method...
Is there any way to style a scrollbar in Firefox now?
not possible with css
you can try jscrollpane
In my experience not possible to that.We have to add some plugings for that.
Please refer this link: Custom CSS Scrollbar for Firefox
Related
I am working with bootstrap 4. I would like to know if there is a way to change the scrollbar style. I just tried with webkit mode, but does not work.
The following code will works for webkit
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Bhoot's code above works, but I added a backgound-color for the thumb because I am using a dark background.
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(200,200,200,1);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color:#fff;
-webkit-box-shadow: inset 0 0 6px rgba(90,90,90,0.7);
}
If you are trying on any div or elements for scroll bar customization, please assign and use element id in the CSS as below,
<div class="cardsContainer" id="cards-container">
#cards-container::-webkit-scrollbar {
width: 8px;
background-color: #F5F5F5;
}
#cards-container::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(104, 140, 240, 0.3);
}
#cards-container::-webkit-scrollbar-thumb {
background-color: lightblue;
outline: 1px solid slategrey;
}
The above way, it worked for me, even though it didn't work when I tried as follows,
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,70);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(239,149,36,100);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,30);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,30);
}
I found this css online which modified the style of the scroll bar. However it also changed the scroll bar of the page itself and I need it to change only the one of the menu list. The menu list id is "cssmenu" . Is it possible and how please?
Just use any selector before your scroll rules
.myscroll {
height: 1000px;
overflow: scroll;
}
.myscroll p {
height: 2000px;
}
.myscroll::-webkit-scrollbar {
width: 12px;
}
/* Track */
.myscroll::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,70);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
.myscroll::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(239,149,36,100);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,30);
}
.myscroll::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,30);
}
<div class="myscroll">
<p>Content<p>
</div>
I put the custom scroll bar it works on all browser but on Firefox it doesn't work.
::-moz-scrollbar {
width: 6px;
}
::-moz-scrollbar-track {
-moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-moz-border-radius: 10px;
border-radius: 10px;
}
::-moz-scrollbar-thumb {
-moz-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0);
-moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-moz-scrollbar-thumb:window-inactive {
background: rgba(255,0,0);
}
Firefox does not support custom scrollbars. See more at https://bugzilla.mozilla.org/show_bug.cgi?id=77790.
You can use JQuery Custom Scrollbar.
I'm using this free template for a study project: jsFiddle
My problem appears when I'm using IE7, because the botton margin of the DIV with id="outerwrapper" totally disappear.
Here you can find the css code for the outerwrapper:
div#outerwrapper {
margin: 20px auto;
width: 960px;
margin-bottom: 20px;
background-color: #CEC7AA;
-moz-box-shadow: 0 0 3px 3px #333;
-webkit-box-shadow: 0 0 3px 3px #333;
box-shadow: 0 0 3px 3px #333;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
}
Any suggestions?
A margin needs something to "bounce" on. It can't "bounce" against the body. So instead of using a margin-bottom to the child, rather use a padding-bottom to the parent:
body {
padding-bottom: 50px;
}
I created a website. I customized the main vertical scrollbar.
It works good on Google Chrome and Safari but not in Mozilla Firefox.
Do you have any idea to fix this problem ?
CSS CODE
::-webkit-scrollbar {
width: 10px;
height: 6px;
background: #FFF url(images/bg-blog-repeat.png) 0 0 repeat;
}
::-webkit-scrollbar-thumb {
border: solid 0 transparent;
border-right-width: 4px;
-webkit-border-radius: 5px;
-webkit-border-top-right-radius: 9px 5px;
-webkit-border-bottom-right-radius: 9px 5px;
-webkit-box-shadow: inset 0 0 0 1px rgb(79,79,79), inset 0 0 0 6px rgb(102,102,102);
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow: inset 0 0 0 1px rgb(90,90,90), inset 0 0 0 6px rgb(110,110,110);
}
::-webkit-scrollbar-thumb:horizontal {
border-right-width: 0;
border-bottom-width: 2px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px 9px;
-webkit-border-bottom-left-radius: 5px 9px;
}
::-webkit-scrollbar-corner {
background: #FFF url(images/bg-blog-repeat.png) 0 0 no-repeat;
}
body ::-webkit-scrollbar {
background: transparent none;
}
Thanks.
For every line that begins with -webkit-, write another exactly like it, replacing -webkit- with -moz-