How to Style the Scrollbar of on Iframe

how to style the scrollbar of on iframe?

There is no cross-browser way to style the scrollbars.

The code that you have only works in Internet Explorer, and only in quirks (non-standard) mode.

What you have in the iframe is isolated from the main page, you have to style the scrollbars on the page where they appear, i.e. in the page that you load in the iframe. Any styling that you apply to the main page does not affect what's in the iframe.

If you can't change the content of the page that you load in the iframe, it's not possible to style it's scrollbars.

Style iFrame SCROLLBARS

This is what I found:

The scrollbar-xxx-color property changes the color of the scrollbars.
(xxx = either base, face, track, arrow, highlight, shadow, 3dlight, and
darkshadow)

So the iframe's scrollbar color can be changed by using these into the BODY element of the page you have in your iframe. Not in the page where you add the <iframe ... to, but the page that loads into the iframe.

Source: http://www.tagindex.net/css/frame/scrollbar_color.html

iframe scrollbar replace with my own design

Here's a good resource that I used to get it working in Webkit browsers:

But the bigger issue is the iFrame. If you own the content in the iFrame or can change the CSS in it then you are good to go. If you don't own stuff within the iFrame and are using the iFrame to pull in a page from another site then you won't be able to change the scrollbar from the original page.

Iframe Scrollbar css

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

Problem changing scrollbar design in iframe

CSS of the parent frame cannot affect an iframe, you have to include it in the source of the page loaded by the iframe.

JavaScript of the parent frame can add CSS to the page in the iframe, if both pages come from the same origin (which seems to be the case in your example).

horizontal scrollbar in iframe

You told the element to be scrollable if an overflow exists in x-axis direction. If there is no overflow the scrollbar stays disabled.

If you want the content of the iframe to be wider, simply put the contents inside the iframe into a container with

.container {
  width: 200%;
}

The iframe should have position: relative; set.
Please confirm if this solves your problem.

---

Related Topics