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.
Related
I've set up my own custom scrollbar with CSS, and I'd like to know know how to only apply these settings to my vertical crossbar.
I've looked up other posts to fix this, but haven't been successful in implementing their solutions in my project.
Any fix that either removes my horizontal scrollbar completely or resets its settings to default would be greatly appreciated.
Here's my code:
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: rgb(26, 23, 23);
}
::-webkit-scrollbar-thumb {
background-color: hsl(270, 2.9%, 48.7%);
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: hsl(270, 2.9%, 78.7%);
}
edit: The problem seems to have been related to other pre-built styles overriding overflow-x. overflow-x: hidden !important; solved the issue.
The questioner have faced a problem that a WebKit engine won't allow him to remove customized horizontal scrollbar.
It seems that the implementation of such a removal vary from one browser to another and there's no universal way to hide scrollbars.
Using overflow: hidden will disable the scroll and that’s not what we want.
So we’ll need another way to hide the scrollbar.
Unfortunately, there is no universal CSS property that does something
like this
div {
scrollbar-visibility: hidden; /* <--- I wish we had this one !! */
}
We’ll need to implement different CSS properties for each browser.
For Firefox, we can set the scroll-bar width to none.
scrollbar-width: none; /* Firefox */
For IE, we’ll need to use -ms prefix property to define scrollbar style
-ms-overflow-style: none; /* IE 10+ */
For Chrome and Safari. We’ll have to use CSS scrollbar selector.
Then apply display: none to hide it.
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
Or you can set it’s width and height to 0.
::-webkit-scrollbar {
width: 0;
height: 0;
}
https://redstapler.co/css-hidden-scrollbar-while-scrollable-element/
Nevertheless, the following solution took effect in questioner's situation:
overflow-x: hidden !important;
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 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