Iframe Scrollbar css

Question

我该如何改变iframe滚动条的css？我的iframe中的当前滚动条的问题是框架不是很宽，滚动条看起来很笨重，占用太多空间...使用"scrolling="no"使滚动条消失，但用户无法滚动......顺便说一下，我的浏览器是谷歌浏览器...

Answer 1

这是改变iframe中滚动条的镀铬

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

Answer 2

你不能用CSS设计一个滚动条（然后打开和关闭）。

有一些专有的东西，可以让你应用一些样式，但只有IE和Opera支持。

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

作为评论者指出，WebKit现在支持a different proprietary mechanism for styling scrollbars。我不知道WebKit的Chrome版本是否已经合并或启用。

你可能看看用JavaScript取代滚动条批发，而jScrollPane似乎做了一个合理的工作，不打破常规的交互规则。

这就是说，改变用户控件的外观是我会尽量避免，并且使一些用户需要在小套瞄准一个指针从闪烁的红灯标示“Fitts's law”。

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

Answer 3

您可以通过获取滚动元件的框架，例如使用jQuery使它：

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

但正如有人说 - 它不是一个漂亮的解决方案。