iframe Scrollbar css

Question

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

Answer 1

这是改变chrome

中iframe中滚动条的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;
}

Answer 2

你根本无法使用CSS设置滚动条的样式（除了打开和关闭它之外）。

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

Chrome没有提供执行此操作的机制。

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

你可以看看用JavaScript替换滚动条批发，并且jScrollPane似乎做了合理的工作，没有违反通常的交互规则。

也就是说，改变用户控件的外观是我试图避免的，并且制作用户需要将指针对准较小的的东西会使闪烁的红灯标记为“{{3 }}”。

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

Answer 3

您可以通过获取框架中的滚动条元素来实现它，例如使用jquery：

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

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