CODEWITHSUNDEEP
javascripthtmlcss
David
David

Reputation: 13999

Iframe Scrollbar css

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.

Upvotes: 5

Views: 24905

Answers (3)

David
David

Reputation: 13999

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;
}

Upvotes: 2

Quentin
Quentin

Reputation: 943214

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".

Upvotes: -1

Łukasz W.
Łukasz W.

Reputation: 9755

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.

Upvotes: 0

Related Questions