我在主页面中有一个iframe，我想在其中为水平滚动条提供trancparency。在chrome浏览器-webkit css样式工作但我在IE中也需要它。我搜索了很多，每个人都说使用过滤器：色度应该有效。我还阅读了这些例子msdn。在msdn示例中，他们说它应该工作IE 5.5及更高版本，但我看不到结果在IE 11中工作。还有一个像我一样的人在msdn页面上评论过滤器：色度不适用于IE 11。 那么如何在CSS代码中过滤IE 11中的特定颜色，或者如何为滚动条提供透明度？
这是我用于IE的代码示例
body #myIframe {
/*IE 5.5. and later*/
scrollbar-track-color: #FF00FF;
scrollbar-face-color: #FF00FF;
scrollbar-highlight-color: #FF00FF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FF00FF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
filter: chroma(#FF00FF);
filter: progid:DXImageTransform.Microsoft.Chroma(color='#FF00FF');/*same as the above line*/
}
这是使用chrome浏览器的代码示例。
/*chrome scrollbar style*/
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
答案 0 :(得分：1)
许多浏览器不再支持滚动条上的css更改。
你有这样的js解决方案： 的 jscrollpane
将此添加到主标记：
<!-- styles needed by jScrollPane --> <link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <!-- latest jQuery direct from google's CDN --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <!-- the mousewheel plugin - optional to provide mousewheel support --> <script type="text/javascript" src="script/jquery.mousewheel.js"></script> <!-- the jScrollPane script --> <script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
这个 jQuery 跟随你的容器：
$('.scroll-pane').jScrollPane();