5

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.

Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
David
  • 13,619
  • 15
  • 45
  • 51

3 Answers3

2

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;
}
Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
David
  • 13,619
  • 15
  • 45
  • 51
  • 1
    It would be worth mentioning that this css/html should be on the page inside the iframe not the page hosting the iframe right? That how I got it working any way... – Markus Knappen Johansson Dec 28 '20 at 11:47
0

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.

Łukasz W.
  • 9,538
  • 5
  • 38
  • 63
-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".

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335