如何改变iframe滚动条的样式？

web前端开发

css

javascript

iframe

html

RayLiao 2014年11月19日提问 · 2014年11月20日更新

关注  关注

收藏  收藏，.2k 浏览

问题对人有帮助，内容完整，我也想知道答案0问题没有实际价值，缺少关键内容，没有改进余地

通过css或者javascript都可以，能兼容不同浏览器。

有什么方法吗？

用公子介绍的插件malihu-custom-scrollbar-plugin

<iframe class="myframe" src="game.html" width="" frameborder="no" border="">

</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="" frameborder="no" border="">

    </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/