I can customize the scrollbar in chrome using css like this
::-webkit-scrollbar {
width: 7px;
}
However, this does not work in Firefox (version 38) and IE (version 11)
I tried the following code but to no avail.
scrollbar[orient="vertical"],
scrollbar[orient="vertical"] thumb,
scrollbar[orient="vertical"] scrollbarbutton
{
min-width: 7px !important;
max-width:7px !important;
-moz-appearance: none !important;
}
Pretty sure there's no support in Firefox and there isn't going to be any time soon.
Your best bet would be a JQuery plugin that works across all browsers.
Malihu Custom Scrollbar
Perfect Scrollbar
Custom Scrollbar
Related
We are working on a markup with customized scrollbars.
For this task we use ::-webkit.
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 0px;
background-color: #bfbfbf;
}
::-webkit-scrollbar-thumb {
background-color: rgb(255,51,0);
border-radius: 0;
}
Is working great on desktop devices (chrome)... But on Android Chrome nothing happens.
Is this not working on Mobile? Any workaround or other solution?
Thanks!
I've been having the same problem... So far, the only explanation I've been able to find is that, the custom scrollbars works only if the body has position: absolute.
I don't like this solution as it affects some other features in my site, but unfortunately, there isn't any other way I've been able to show custom scrollbars in mobile...
I'm not sure why it is so... Should be simple enough, but for some reason, it's too complicated!
I've got some CSS code in order to display the title attribute when touching on abbreviations and symbols of a smartphone's screen. Within a section '#media only screen and (max-width: 767px)' of my stylesheet I have the following code:
span[title]:active::after,abbr:active::after {
color: Maroon;
font-weight: bold;
content: 'Meaning: ' attr(title);
position: fixed;
top: 3ex;
left: 2ex;
display: block;
z-index: 100;
background-color: White;
box-shadow: .3ex .3ex .1ex Grey;
border: 1px solid grey;
padding: .4ex;
width: 70%;
height: auto;
}
It does work flawlessly on Android -I've tested it on Chrome, Firefox and Samsung browser- and my iMac -tested it on Chrome, Firefox, Safari and Opera after stretching the width of the browser's window, but it doesn't work on iOS at all! The trick/workaround of adding '-webkit-transform: translate3d (0,0,0);' added to the code did not help to this.
I should appreciate any help a lot!
Thank you very much indeed!
SOLVED!
I tried the solution as proposed in the following link: Enable CSS active pseudo styles in Mobile Safari
and it works fine. The problem was that Safari Mobile disables :active pseudo-class by default, and this simple idea solves it.
I tried some other working solutions, such as 'body ontouchstart=””' and similar ones, but all of them gave errors when checking the code against W3C validator.
Many thanks to all those that answered and tried to help!
The :active property only works on activabe elements. Documentation says:
There may be document language or implementation specific limits on which elements can become :active or acquire :focus.
So the most simple thing to do is to set the tabindex attribute to 0 for each element you want to be activable.
This has the big advantage that your code will work with keyboard.
EDIT: adding tabindex=-1 for all elements can be done easily with jQuery using
$("abbr[title]").attr("tabindex", -1);
or using standard javascript
var ele=document.querySelectorAll("abbr[title]");
for (var i=0;i<ele.length;i++) {
ele[i].setAttribute("tabindex", -1);
}
Scrollbar css works in Google chrome but not in mozilla and Internet Explorer.
My css is
.skin-1 ::-webkit-scrollbar {
width: 5px;
}
.skin-1 ::-webkit-scrollbar-track {
background-color: #eaeaea;
border-left: 1px solid #ccc;
}
.skin-1 ::-webkit-scrollbar-thumb {
background-color: #0e9aef;
}
.skin-1 ::-webkit-scrollbar-thumb:hover {
background-color: #aaa;
}
Currently, it is exposed behind the -webkit vendor prefix for use in browsers using the Webkit (and Blink) rendering engine.
please read this CSS-Tricks article.
Scrollbar is NOT a css standard, that means some browsers may support it while others don't. In this case you are applying the `-webkit-´- prefix which aims just to next browsers:
Android, Chrome, iOS and Safari.
You can check here for more info.
Aa long as I know scroll bar is not supported at all in Firefox (if not changed reciently).
for a full browser compatibility I would recomend You to use some nice (and easy to use) jquery libraries around.
I want make the scrollbar for my site dark and customize it. It works on Chrome with ::-webkit-scrollbar but it doesn't work on Edge -- I couldn't find way changing the scrollbar color on Microsoft Edge.
Does anyone know how to do this? Please help :)
There is currently no way to do this in Microsoft Edge. In IE there were vendor specific, non-standard, CSS properties to achieve this. These were removed in MS Edge as they could be used to target the browser and break compatibility with sites that were expecting old IE behaviour (the properties are very old). Unfortunately there are no good standard properties in CSS to replace these at the moment.
There is a UserVoice suggestion you can vote on to add a method to style scrollbars. We use this as one of the inputs when planning feature priorities in the EdgeHTML engine.
The following worked for me:
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track {
background: orange;
}
*::-webkit-scrollbar-thumb {
background-color: blue;
border-radius: 20px;
border: 3px solid orange;
}
For more info: https://www.digitalocean.com/community/tutorials/css-scrollbars
I'm working on this project: http://maithrigoonetilleke.com/
And I need some help fixing the scroll bar of the inner pages to be of the same colour in Chrome, Internet Explorer & Firefox.
but it only works on Chrome. In IE and Firefox it is same as default.
I used a custom css code to make the scrollbar look nicer:
CSS
::-webkit-scrollbar {
width: 12px;
background-color: #3c3c3c;
}
::-webkit-scrollbar-track {
border-radius: 0px;
background-color: #000;
}
::-webkit-scrollbar-thumb {
border-radius: 0px;
background-color: #606060;
}
Check the link: http://maithrigoonetilleke.com/books/
CSS scrollbar customization is supported by Webkit-based browsers only. So, to customize scrollbars crossbrowser-way you should use javascript-based solution. There are lots of CSS customizable scrollbar plugins you can find in internet: jScrollPane, Malihu Custom Scrollbar, perfect-scrollbar and others. Try jQuery Scrollbar - this one is fully CSS customizable.