2016-10-15 11 views
1

iframeがメインページにある可能性があり、その中に水平スクロールバーに透明性を付与したいと考えています。クロムブラウザでは - ウェブキットCSSスタイルが動作しますが、私はIEでこれも必要です。私はそれをたくさん検索し、誰もがフィルタを使用すると言う:彩度が働くはずです。私もこれらの例を読むmsdn。 msdnの例では、IE 5.5以降で動作するはずですが、IE 11で動作している結果が見えません。また、msdnページのフィルタにコメントする人がいます。クロマはIE 11では動作しません。 では、IE 11の特定の色をCSSコードでフィルタリングするにはどうすればよいですか?またはスクロールバーに透明性を与えるにはどうすればよいですか?IE 11でCSSフィルタのクロマが機能しない

これは私が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*/ 
} 

のために使用され、この1つは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); 
} 

答えて

1

多くのブラウザでは、スクロールバーのCSS変更をサポートしなくなりました。

あなたは、このようなJSのソリューションがあります:あなたのコンテナに次の

<!-- 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のjscrollpane

あなた頭タグにこれを追加します:

$('.scroll-pane').jScrollPane();

関連する問題