如何改变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/

---

http://www.hongkiat.com/blog/css-scroll-bar/
先给个网址你看看吧。本来想直接给你说用::scrollbar伪类的，具体刻查看这里。但是考虑到你还要兼容，还是用JS吧。然后我就搜到了这个插件 https://github.com/malihu/malihu-custom-scrollbar-plugin ，应该是你需要的。