如何改变iframe滚动条的样式?
通过css或者javascript都可以,能兼容不同浏览器。
有什么方法吗?
用公子介绍的插件
malihu-custom-scrollbar-plugin
<iframe class="myframe" src="game.html" width="1018" frameborder="no" border="0">
</iframe>
<script>
(function($){
$(window).load(function(){
$(".myframe").mCustomScrollbar();
});
})(jQuery);
</script>
会报错:
Uncaught TypeError: Cannot read property 'ownerDocument' of null
-- jquery.min.js
如果在
iframe
外面包一层
div
:
<div class="content">
<iframe class="myframe" src="game.html" width="1018" frameborder="no" border="0">
</iframe>
</div>
<script>
(function($){
$(window).load(function(){
$(".content").mCustomScrollbar();
});
})(jQuery);
</script>
iframe
不设定高度的情况下,
iframe
的滚动条不见。
给iframe设定一个高度
800px
,外面的content设为
500px
,就可以了,但是这样没意义,一效果不行(iframe里面内容长的话,会有内容滚动而滚动条不动的状态,其实就是变成两个滚动啦,
iframe
和
content
),二是iframe高度没办法固定,因为里面内容不定。
还是写在
jsfiddle
比较清楚吧。
http://jsfiddle.net/RayLiao/vppf5uqx/4/
web前端开发 css iframe HTML JavaScript
Answers
http://www.hongkiat.com/blog/css-scroll-bar/
先给个网址你看看吧。本来想直接给你说用
::scrollbar
伪类的,具体刻查看
这里
。但是考虑到你还要兼容,还是用JS吧。然后我就搜到了这个插件
https://github.com/malihu/malihu-custom-scrollbar-plugin
,应该是你需要的。