开发者

Why Chrome does not show CSS ::-webkit-scrollbar scrollbar for iframe?

Why Chrome does not show CSS ::-webkit-scrollbar scrollbar for iframe?

Demo http://jsfiddle.net/laukstein/C9s3P/

<iframe scrolling="yes" style="overflow-x:hidden; overflow-y:scroll; width:150px; height:50px;" src="http://en.wikipedia.org/wiki/Web_browser"></iframe>

CSS

::-webkit-scrollbar{
    width:0.8em;
    height:0.8em;
    background-color:#fff;
}
::-webkit-scrollbar:hover{
    background-color:#eee;
}
::-webkit-resizer{
    -webkit-border-radius:4px;
    background-color:#666;
}
::-webkit-scrollbar-thumb{
    min-height:0.8em;
    min-width:0.8em;
    -webkit-border-radius:4px;
    background-color: #ddd;
}
::-webkit-scrollbar-thumb:hover{
    background-color: #bbb;
}
::-webkit-scrollbar-thumb:active{
    background-color:开发者_如何学Go#888;
}


Apparently according to results from http://browsershots.org the CSS implementation differs between Chrome versions 5 & 6+. When your test screen is viewed it appears as follows...

Changes in Behaviour

Just some general info about changes in the behaviour of stylable scroll bars.

Chrome 5.0.x - iFrame shows with scrollbars

Why Chrome does not show CSS ::-webkit-scrollbar scrollbar for iframe?

Chrome 6.0.x+ - shows without scrollbars

Why Chrome does not show CSS ::-webkit-scrollbar scrollbar for iframe?

(entire set of test results @ http://browsershots.org/http://jsfiddle.net/laukstein/C9s3P/embedded/result/)

Update

Apparently the official Styling Scrollbars page doesn't say it works with iFrames, although at one point (Chrome 5) it did as seen above. The behaviour is different since 6.

Posted by Dave Hyatt on Thursday, March 19th, 2009 at 2:19 pm
WebKit now supports styling of the scrollbars in overflow sections, listboxes, dropdown menus and textareas. For those who want to skip the article and just go right to the source, here is an example [...]

A comment on that same page says:

Too bad it can’t style windows scrollbars.

An iFrame normally uses Windows scrollbars.

One possibility is Chrome's implementation of iFrames or scrollbars changed between v5 to v6 from either a non-standard scrollbar to a pure Windows scrollbar, or from a "faked" div iFrame under the hood (or something similar) to a true Window for the iFrame, as the browser has evolved on the Windows platform.


It seems be working on Chrome 14.


Works for me. Perhaps check your version of Chrome? (Im using 8.0.552.231)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜