javascript iframe滚动条css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3559952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Iframe Scrollbar css
提问by David
How do I go about changing the cssof an iframescrollbar?
我该如何去改变css一个的iframe滚动条？
My problem with the current scrollbar in my iframe is the frame is not very wide and the scrollbar appears bulky in it and takes up too much space.
我的 iframe 中当前滚动条的问题是框架不是很宽，滚动条在其中显得笨重并占用太多空间。
Using "scrolling="no"makes the scrollbar disappear but then the user cannot scroll.
使用"scrolling="no"使滚动条消失，但用户无法滚动。
By the way, My browser is Google Chrome.
顺便说一下，我的浏览器是谷歌浏览器。
采纳答案by David
This is the css to change the scrollbars in iframes in chrome
这是在 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;
}
回答by Quentin
You can't style a scrollbar (other then to turn it on and off) with CSS at all.
您根本无法使用 CSS 设置滚动条的样式（除了打开和关闭它）。
There is some proprietary stuff which lets you apply some styling, but this is supported only by IE and Opera.
有一些专有的东西可以让你应用一些样式，但这只有 IE 和 Opera 支持。
Chrome provides no mechanism to do this.
Chrome 没有提供执行此操作的机制。
As a commenter points out, WebKit now supports a different proprietary mechanism for styling scrollbars. I've no idea if the Chrome build of WebKit has this merged or enabled though.
正如评论者指出的那样，WebKit 现在支持一种不同的专有机制来设置滚动条样式。我不知道 WebKit 的 Chrome 版本是否已合并或启用此功能。
You couldlook at replacing the scrollbar wholesale with JavaScript, and jScrollPaneappears to do a reasonable job of not breaking the usual interaction rules.
您可以考虑用 JavaScript 替换滚动条，jScrollPane似乎在不破坏通常的交互规则方面做得很合理。
That said, changing the appearance of user controls is something I'd try to avoid, and making something users need to aim a pointer at smallersets off the flashing red light marked "Fitts's law".
也就是说，改变用户控件的外观是我尽量避免的事情，并且使用户需要将指针对准较小的东西会引起标有“菲茨定律”的闪烁红灯。
A better solution would probably be to "Not cram so much information into so little space".
更好的解决方案可能是“不要把这么多信息塞进这么小的空间”。
回答by ?ukaszW.pl
You can make it by getting scrollbar element in the frame, for example use jquery:
您可以通过在框架中获取滚动条元素来实现，例如使用 jquery：
$("#iFrameId").contents().find("-webkit-scrollbar").css("width","5px")
But as others said - it's not a pretty solution.
但正如其他人所说 - 这不是一个很好的解决方案。
