Iframe滚动条css

这是在chrome中更改iframes中滚动条的css

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

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

但正如其他人所说,这不是一个很好的解决方案。

有一些专有的东西,让你应用一些样式,但这是唯一的支持IE和歌剧。

Chrome没有提供这样做的机制。

正如一位评论人士指出的,WebKit现在支持 a different proprietary mechanism for styling scrollbars . 我不知道WebKit的Chrome版本是否已经合并或启用了这个功能。

你呢 能够 看看用JavaScript替换滚动条,然后 jScrollPane

也就是说,更改用户控件的外观是我尽量避免的事情,而让用户需要将指针指向它 点亮闪烁的红灯 Fitts's law

一个更好的解决方案可能是“不要把这么多的信息塞进这么小的空间”。