iframe，body滚动条重复

一：开发的时候碰到一个滚动条问题，即页面出现两个滚动条，外面的是body的滚动条，里面是iframe的滚动条，大概就是如下图：

解决这个问题的方式无非两种：

1：去掉body滚动条

2：去掉iframe滚动条

可是这两种解决方式在实践过程中并不是很顺利，在使用第一种时，直接在body上加 style="overflow-x:hidden;overflow-y:hidden" 。第二种方式，直接给iframe加上scrolling=“no” 属性，里面的滚动条消失了，但是iframe里面的内容却显示不出来了。

二：于是我们需要再次思考：需要怎么做才能解决问题？

我看了一下iframe属性height，发现他的值是570，而他的实际高度是大概3000的，570只是当前一页的高度，我在f12中把height改成3000，发现body的滚动条竟然变得和iframe的滚动条差不多大小，也就是只要我把iframe的滚动条去掉的话，用body的滚动条就可以。

三：所以，目标很明确了，给iframe加上scrolling=“no” 属性，在页面加载以后把iframe的height换成实际高度就可以了。

//获取class是tab_iframe的iframe的实际高度
var scoHeight = $(".tab_iframe").contents().find("body").height();$(".tab_iframe").css({height:scoHeight
})

半个月后发现，还是第一种方式好用

iframe，body滚动条重复相关推荐

iframe修改滚动条样式
** iframe修改滚动条样式 ** 1.引入后添加iframe页面或url 2.*如对本身自带的滚动不满意可到引入源文件进行添加样式
html5 iframe 无法滚动条,【HTML5】iframe滚动条问题
HTML 4.01 Transitional 标准子页面不要表头 ****** 去掉 iframe 横向滚动条或竖条 1. 在主页面加 iframe scrolling="yes" ...
html5 iframe 无法滚动条,iframe嵌入的页面没有滚动条
怎么样iframe没有滚动条页面有滚动条 iframe没有滚动条 scrolling="No"这个去掉了但是页面超过了屏幕,应该有不是到你只什么意思哦frameborder=&q ...
html iframe随页面滚动,如何隐藏iframe的滚动条，但依然可以页面滚动
今天遇到一个这样的问题:网页中如何隐藏iframe中的垂直滚动条,但依然可以用滚轮实现页面滚动???我就想先把iframe定义宽度和高度,在设置overflow:hidden;呗,但是这样多余的部分会 ...
去除iframe内滚动条
iframe去滚动条应该有多种方式,在此简单总结两种: 1.在<iframe>标签中添加scrolling属性,值为yes时,有滚动条,值为no时无滚动条.这种方法简单,但是页面估计不怎么 ...
iframe隐藏滚动条
iframe框架渐渐的退出了市场,可能是因为自身存在一定的缺点,今天遇到了一个bug,iframe隐藏滚动条的问题其实很简单只需要在css里面添加这段代码即可: body { over ...
iframe关于滚动条的去除和保留
iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条.那么我们应该怎么做呢? 一:去掉全部的滚动条第一个方法 ...
iframe横向滚动条在Chrome上不显示在火狐上显示
问题给iframe加了scrolling='yes',横向滚动条在Chrome出不来,火狐上是有的在外面加div 可以在iframe外面再套一个div,控制div的溢出 <div style ...
iframe禁用滚动条后根据内容动态设置宽高
iframe作为嵌入内容,如果显示滚动条,有时候可能会出现外部有滚动条,iframe内部也有滚动条,影响美观,体验性也不好.如果禁用滚动条,有可能会出现iframe中的内容显示的情况.因此,如果禁用滚 ...

iframe，body滚动条重复

一：开发的时候碰到一个滚动条问题，即页面出现两个滚动条，外面的是body的滚动条，里面是iframe的滚动条，大概就是如下图：

二：于是我们需要再次思考：需要怎么做才能解决问题？

三：所以，目标很明确了，给iframe加上scrolling=“no” 属性，在页面加载以后把iframe的height换成实际高度就可以了。

iframe，body滚动条重复相关推荐

最新文章

热门文章