Javascript Iframe滚动条css

如何更改

iframe

滚动条的

css

iframe中当前滚动条的问题是，框架不是很宽，滚动条在其中显得笨重，占用了太多空间

使用

“scrolling=”no“

会使滚动条消失，但用户无法滚动

---

顺便说一句，我的浏览器是Google Chrome。

你根本不能用CSS设置滚动条的样式（除了打开和关闭滚动条）

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

Chrome没有提供这样做的机制

正如一位评论者所指出的，WebKit现在支持。我不知道WebKit的Chrome版本是否合并或启用了这种功能

您可以考虑用JavaScript整体替换滚动条，并且似乎在不违反通常的交互规则方面做了合理的工作

也就是说，更改用户控件的外观是我尽量避免的事情，而让用户需要将指针指向较小的控件会触发闪烁的标有“”的红灯

---

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

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

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

---

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

这是在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;
}

---

这并不完全正确：我可以用div代替iframe并设置div滚动条的样式吗？-选择的元素没有什么区别。在顶部页面的

标记中。还记得参考jquery库…值得一提的是，这个css/html应该在iframe内部的页面上，而不是承载iframe的页面上对吧？我就是这样让它工作的。。。