I've achieved the desired design for the scrollbar using the following:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 8px;
background-color: #999;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #666;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
As it can be seen above the changes are of course not for Internet Explorer, where I could just do for the moment the following:
body {
-ms-scrollbar-base-color: #999;
-ms-scrollbar-track-color: #999;
-ms-scrollbar-face-color: #666;
-ms-scrollbar-arrow-color: #999;
}
I want to know if is possible to recreate the same design present on Chrome in IE. Below are printscreens with the scrollbar, first from Chrome, second from Internet Explorer.
Unfortunatelly there is no cross browser way to style scrollbar with CSS. But you can try next JavaScript custom scrollbar plugins (mostly jQuery): jQuery Scrollbar, jScrollPane, mCustomScrollbar, perfect-scrollbar, slimScroll, baron or NiceScroll. There are more custom scrollbars available, but they are less functional/well-known.
I have use this : http://jscrollpane.kelvinluck.com/ this work on IE and it is very easy to use :) Enjoy !
Related
I have added a webkit-scrollbar to my Jekyll blog. I am using this code in my css:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
height: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: rgba(253,206,147,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
It works great but on iOS Safari there appears to be a very thin line left behind the scroll bar. Here is the original view:
Now look to the left of the scroll bar, and you can see a very thin line the same width as the actual scroll bar:
Why is this happening? Is there a way to fix it? Any suggestions would be great!
Nothing more than a rendering artifact from your:
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
Shadow enabled:
Shadow disabled:
Hey is it possible to make scrollbar "hidden" i dont wanna use overflow-y: hidden
just something like background: transparent or something like that
Here you will find a description how to hide the scrollbar just with CSS.
And here in the second example you will find a solution how to hide the scrollbar within a div for example.
The trick in the second example is to define a wider div container that the surrounding one.
.hidden-scrollbar .inner {
height:200px;
overflow:auto;
margin:15px -300px 15px 15px;
padding-right:300px;
}
Just play arround with the values of margin and padding.
There is a CSS rule that can hide scrollbars in Webkit-based browsers (Chrome and Safari). That rule is:
.element::-webkit-scrollbar { width: 0 !important }
u can change width / background-color and other properties .
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
}
this css code might work
In Webkit browsers:
::-webkit-scrollbar {
display: none;
}
This is my CSS for the custom style scroll-bar its works fine in chrome but not in Firefox browser.
how to make this CSS compatible in Firefox browser
<style>
.scroll::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar {
height: 6px;
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar-thumb {
background-color: #000000;
border-radius:10px;
}
</style>
Firefox scollbar style customization doesn’t work any more.
But you can try plugins that works in all browser.
Jscrollpane
Hesido
http://script-tutorials.com/custom-scrollbars-cross-browser-solution
http://manos.malihu.gr/jquery-custom-content-scroller
And also you can try below plugin only for firefox.
Noiascrollbars
hope this information helps you.
My new site is not been displayed how it should be in internet explorer, in some parts of the site internet explorer dose not seem to be reading the css at all!
here is the css that ie is not reading can someone tell me what is wrong with it? or what i need to change to make it work in ie.
#reg_area {
border: 2px solid #ffffff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 2px 3px 3px #cccccc;
-webkit-box-shadow: 2px 3px 3px #cccccc;
background-color:#79af11;
background-image: -moz-linear-gradient(#b2d545,#79af11);
background-image: -webkit-gradient(linear, 0 0, 0 100%,color-stop(0, #b2d545),color-stop(1, #79af11));
text-align:center;
height:35px;
padding:10px;
font-family: Tw_Cen_MT_Condensed;
color: #DAF7A4;
font-size: 25px;
text-shadow: 2px 2px 2px #2c4006;
}
#reg_area a:link {
font-family: Tw_Cen_MT_Condensed;
font-size: 45px;
color:#ffffff;
text-decoration:none;
}
#reg_area a:visited {
color:#ffffff;
}
#reg_area a:hover {
color:#D8F170;
}
Tw_Cen_MT_Condensed is not a web-safe font, hence won't be read.
You have your gradient set up as background-image, not background
Shadows don't work in IE
Your Box Radius and Gradients point to Webkit browsers and Firefox, not IE.
Have you even looked into how to make stuff work in IE? Hint: Try to search for workarounds and what is missing for each issue you have on IE.
Every line with -moz-
like -moz-border-radius: 15px;
will work only for mozilla (firefox)
It's probably the same with webkit.
I'm busy developing a site in HTML5 and CSS3, but I need it to support older browsers as well. It makes use of the Modernizr library but this does not allow me to replace certain CSS3 elements with CSS2.
eg: I have a div that makes use of border-radius as well as box-shadow. If CSS3 is NOT detected I want to serve an alternative style which has a background image made up of the rounded corners and faded borders.
Maybe something like adding an extension to the class name:
CSS3 Class - .mainContent
CSS2 Class - .mainContentFlat
I have a div that makes use of
border-radius as well as box-shadow
Doesn't modernizr.js natively support this?
Suppose you have a div which you wanna style with id="test"
<div id="test">
Hello HTML5 CSS3
</div>
You can give CSS like this.
div#test{
height: 50px;
width: 200px;
border: 1px solid #CCC;
}
.borderradius div#test {
border-radius: 4px 4px 0 0;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
}
.no-borderradius div#test {
/*add style rules for css2 here*/
}
.boxshadow div#test {
box-shadow: #666 1px 1px 1px;
-moz-box-shadow: #666 1px 1px 1px;
-webkit-box-shadow: #666 1px 1px 1px;
}
.no-boxshadow div#test {
/*add style rules for css2 here*/
}
You must think of the css2 rules as your "base" rules and the css3 as your "prettifying" rules. In case they are in conflict, you negate the effect through css inheritance. So in the case you're mentioning you would have something like
.mainContent {
background: #fff url(image-with-shadow-and-rounded-corners.png) top left no repeat;
}
.boxshadow.borderradius .mainContent {
background-image: none; /*take out the background image if support for css3 exists*/
-moz-border-radius: 5px;
-wekbkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 5px #000;
-wekbkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}