i have the following code that customizes a webkit scroll bar....
/*webkit scroll bar*/
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0);
}
what i would like to do is customize the scrollbar of a page loaded in firefox the same way... for which i tried the following code..
/*mozilla scroll bar*/
::-moz-scrollbar {
width: 6px;
}
::-moz-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-moz-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-moz-scrollbar-thumb:window-inactive {
background: rgba(255,0,0);
}
but it does not work..... how can i customize the scrollbar in the same way i did for webkit... any help would be appreciated... thanks in advance... :)
You can't because of bug #77790 (Link#1).
Bug 77790 - (scrollbar-colors) Style the scrollbar (binding ::-moz-horizontal-scrollbar to XBL)\
The only way is to use jQuery. I don't know how to code it, so don't ask me. I prepared the following links for jQuery scrollbars. Click here!(Link#2)
Links:
https://bugzilla.mozilla.org/show_bug.cgi?id=77790
http://plugins.jquery.com/custom-scrollbar/
FireFox support these two:
scrollbar-width : auto|thin|none...
scrollbar-color
for firefox now you can use this
.element{
scrollbar-width: thin;
scrollbar-color: blue transparent;
}
where blue is for the thumb and transparent for the track
Related
I have some overflowing horizontal content and want to have a scrollbar visible always to support Windows devices, but I don't want scrollbars anywhere else. `
::-webkit-scrollbar {
display: none;
}
.polls-row::-webkit-scrollbar {
height: 1rem;
}
.polls-row::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.polls-row::-webkit-scrollbar-thumb {
background-color: $color-border;
border-radius: $radius;
outline: 1px solid slategrey;
}
I have this CSS/sass, which I think should work because the class has higher specificity, however I still don't get a scrollbar on .polls-row
How can I do this?
Update your code with below css
::-webkit-scrollbar {
overflow:hidden;
}
Right Way -> ::-webkit-scrollbar{ overflow:hidden; }
Wrong Way -> ::-webkit-scrollbar{ display:none; }
I'm using EasyUI Frozen Columns for DataGrid, so how to change jscrollpane style, was trying:
::-webkit-scrollbar {
width: 12px;
}
but that doesn't work.
one solution is to keep the datagrid in div and add a style .scrollpane now apply the css as below:
For Chrome:
div.scroll-pane::-webkit-scrollbar {
width: 12px;
}
/* Track */
div.scroll-pane::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
div.scroll-pane::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255, 156, 0, 0.89);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
div.scroll-pane::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 156, 0, 0.44);
}
For FireFox using jsscrollpane
$(document).ready(function () {
var FIREFOX = /Firefox/i.test(navigator.userAgent);
if (FIREFOX) {
$('.scroll-pane').jScrollPane();
}
});
I'm trying to share some knowledge by posting some css tricks questions(and jquery tricks in another topics) and answer it.
Here I'm dealing with styling the scrollbar for google chrome browser.
Just add these CSS rules:
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer
Here's what each rule does:
Here is a simple example of a customized scrollbar using css
::-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);
}
Here is how it will look.
ref: https://css-tricks.com/custom-scrollbars-in-webkit/
This is my CSS code:
.thzPartsHeader, .thzPartsContainer {
border:1px solid #0080ff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset;
-moz-box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset;
box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset;
padding: 5px 20px 5px 20px;
margin:auto;
font-family:georgia;
font-size: 12px;
color:#ffffff;
background-color:#000000;
}
This is HTML code:
<fieldset class="thzPartsContainer">
<legend class="thzPartsHeader"><b>Code Will Appear Below</b></legend>
<textarea class="textArea" id="txtarea" name="codearea"></textarea>
</fieldset>
This is how it appears in Google Chrome (This is exactly what I want):
But this is how it appears in Firefox (no reputation to post images :o ):
(source: googledrive.com)
It appears as if the shadows are displaced and margin:auto property is not working in firefox. What is the fix for both of them? please help.
http://jsfiddle.net/f2ndc/
The shadow part of your question is a duplicate of
Box shadow CSS with a <fieldset>. Firefox vs Chrome
Not the best solution as you will have to have a fixed height and width for the <legend> but adding this could work
.thzPartsHeader{
position: absolute;
top: -9px;
left: 50%;
margin-left: -75px;
}
.thzPartsContainer{
padding-top: 9px;
position: relative;
}
fiddle: http://jsfiddle.net/FBca7/2/
I have a web page with a inner div that should be scrolled. That works fine in IOS5, but when I customize the scrollbars is still see the native one?
How can native scrollbars be removed when using custom ones?
The custom scrollbars seems also only to be updated after scroll complete, how to get them scroll when you are dragging the div?
What I've tried:
::-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);
}
#info{
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 400px;
}
You have to remove
-webkit-overflow-scrolling:touch;
to disable that native scroll
Try this:
.webkitScrollClass {
overflow-y:auto;
overflow-x:hidden;
}
.webkitScrollClass::-webkit-scrollbar {
-webkit-appearance: none;
}
.webkitScrollClass::-webkit-scrollbar:vertical {
width: 6px;
}
.webkitScrollClass::-webkit-scrollbar:horizontal {
height: 6px;
}
.webkitScrollClass::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: rgba(0, 0, 0, .3);
}