Iframe Scrollbar css

Question

How do i go about changing the css of an iframe scrollbar? My problem with the current scrollbar in my iframe is the frame is not very wide and the scrollbar appears bulky in it and takes up too much space... Using "scrolling="no" makes the scrollbar disappear but then the user cannot scroll... By the way, My browser is Google Chrome...

Answer 1

You can't style a scrollbar (other then to turn it on and off) with CSS at all.

There is some proprietary stuff which lets you apply some styling, but this is supported only by IE and Opera.

Chrome provides no mechanism to do this.

As a commenter points out, WebKit now supports a different proprietary mechanism for styling scrollbars. I've no idea if the Chrome build of WebKit has this merged or enabled though.

You could look at replacing the scrollbar wholesale with JavaScript, and jScrollPane appears to do a reasonable job of not breaking the usual interaction rules.

That said, changing the appearance of user controls is something I'd try to avoid, and making something users need to aim a pointer at smaller sets off the flashing red light marked "Fitts's law".

A better solution would probably be to "Not cram so much information into so little space".

Answer 2

You can make it by getting scrollbar element in the frame, for example use jquery:

$("#iFrameId").contents().find("-webkit-scrollbar").css("width","5px")

But as others said - it's not a pretty solution.

Answer 3

This is the css to change the scrollbars in iframes in chrome

body   {
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
html {
overflow-y: auto;
background-color: transparent;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
display: none; 
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment  {
height: 30px;
background-color: transparent;
}
::-webkit-scrollbar-track-piece  {
background-color: #3b3b3b;
-webkit-border-radius: 16px;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #666;
border: 1px solid #eee;
-webkit-border-radius: 6px;
}