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

如何改变iframe滚动条的样式?的更多相关文章

  1. css 改变浏览器滚动条的样式

    /*滚动条样式*/ .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .i ...

  2. 调整iframe滚动条失效

    1:<iframe scrolling="auto" frameborder="0" src="' + add + '" style= ...

  3. Javascript和jquery事件--滚动条事件和自定义滚动条事件样式

    很想把滚动条事件跟鼠标滚轮事件放在一起,那就直接写在这一篇了.除了事件以外,对滚动条样式的调整也记在这里吧. 滚动条是浏览器的默认事件,使用overflow:auto/scroll都有可能出现,它的默 ...

  4. js动态改变iframe的高度

    js动态改变iframe的高度的写法 〈iframe id="docDetail" width="100%"  height="200"   ...

  5. iframe滚动条充当浏览器滚动条

    在做博客项目的时候,使用了iframe,方便根据选择的文章类别切换显示的内容,但是文章一般都有很多,通过bootstrap的媒体列表的方式显示的话,iframe是一定会出现滚动条的,特别是我添加了一个 ...

  6. jQuery如何改变css伪元素样式

    首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...

  7. Ajax编程中,经常要能动态的改变界面元素的样式

    在Ajax编程中,经常要能动态的改变界面元素的样式,可以通过对象的style属性来改变,比如要改变背景色为红色,可以这样写:element.style.backgroundColor=”#ff0000 ...

  8. WPF ScrollViewer(滚动条) 自定义样式表制作 再发一套样式 细节优化

    艾尼路 出的效果图 本人嵌套 WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂 WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化) 源代码

  9. javascript动态改变iframe的src

    页面中需要动态的改变iframe的地址,方法有: 1. window.frames["chartFrame"].document.location = "<%=ba ...

随机推荐

  1. jrat

    JRat the Java Runtime Analysis Toolkit What is it? The Java Runtime Analysis Toolkit is a low overhe ...

  2. [Linux] Linux软连接和硬链接

    转载自:http://www.cnblogs.com/itech/archive/2009/04/10/1433052.html 1.Linux链接概念Linux链接分两种,一种被称为硬链接(Hard ...

  3. Spring @Autowired 注解不生效

    @Autowired默认不生效.为了生效,需要在xml配置:<context:annotation-config> 注解一<context:component-scan base-p ...

  4. [Guava] EventBus

    1.  发布-订阅模式 发布-订阅模式(publish-subscribe)是一种编程范式,发布方不发布消息给特定的接收方,而是由订阅方选择性接收.这使得发布方和订阅方相对独立,减少了耦合性. 在发布 ...

  5. javascript正则中ASCII与unicode

    正则表达式中允许直接利用ASCII和Unicode编码来查找我们相应的字符串. ASCII: 下面是检索ASCII编码在x41-x7a范围内的所有匹配的字符串.(x41,x7a为十六进制) var s ...

  6. 【转载】【Todo】电商架构相关技术分析

    看了一篇文章: http://kb.cnblogs.com/page/193670/    淘宝应对"双11"的技术架构分析 没怎么看懂,有时间再看.

  7. 关于typedef的用法总结(zz)

    不管实在C还是C++代码中,typedef这个词都不少见,当然出现频率较高的还是在C代码中.typedef与#define有些相似,但更多 的是不同,特别是在一些复杂的用法上,就完全不同了,看了网上一 ...

  8. java 二维码编码解码

    做一个小项目的时候写了个二维码编码和解码的小工具,感觉可能用得到,有兴趣的朋友可以看下 再次之前,徐需要用到google的zxing相关的jar包,还有javax相关包 以上为可能用到的jar pac ...

  9. 解决:mysql5.7 timestamp默认值0000-00-00 00:00:00 报错

    解决:mysql5.7 timestamp默认值0000-00-00 00:00:00 报错 学习了:https://www.cnblogs.com/cnhkzyy/p/9119339.html se ...

  10. java中的Annotation

    java中包含5个基本的Annotation: @Override @Deprecated @SuppressWarnings @SafeVarargs @FunctionalInterface …… ...