iframe中的modal动态为页面添加元素后页面无法滚动

最新推荐文章于 2022-12-02 10:39:01 发布

蓝阳

最新推荐文章于 2022-12-02 10:39:01 发布

阅读量1.7k

点赞数

分类专栏：前端 HTML&CSS

本文链接：https://blog.csdn.net/forrest_chen/article/details/61198348

版权

HTML&CSS 同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

代码大致结构

<body>
<iframe id="mainFrame" style="width:100%;height:100%;">


<div id="content"></div>


<button>打开模态框在content中添加元素</button>


<div id="addElementWindow" ...bootstrap模态框代码略...></div>


</iframe>
</body>

当为id为content的div内添加元素，且div的高度超过iframe的高度后，发现iframe无法滚动了！试了下firefox正常，safari、chrome异常，这是什么bug。。。

后来发现，只要拖动下窗口，让iframe的高度出现变化，就再次能够滚动了。

不得已，只好在模态框隐藏的时候强制修改iframe的高度：

$("#addElementWindow").on("hidden.bs.modal", function () {
	var mainFrame = $("#mainFrame");
	var height = mainFrame.height();
	mainFrame.css("height",height+1+"px");  // 代码1
	mainFrame.css("height",height+"px");	// 代码2
})

看似没问题，执行起来居然没效果，我试着去掉代码2，高度加1像素后不复原，chrome生效了。这太诡异了，代码1+2速度太快了浏览器渲染跟不上了？

但是不能每增加一次空间，就给iframe加一个像素高度吧？于是可以在打开模态框的时候+1像素，关闭的时候-1像素，但是觉得这样导致页面抖动，不太好，于是用了animate凑合了：

$("#addElementWindow").on("hidden.bs.modal", function () {
	var mainFrame = $("#mainFrame");
	var height = mainFrame.height();
	mainFrame.animate({height:height+1},1); 
	mainFrame.animate({height:height},1);	
})

如果有朋友知道这个bug和更好的解决方法，跪求~

蓝阳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
iframe中的modal动态为页面添加元素后页面无法滚动

代码大致结构打开模态框在content中添加元素当为id为content的div内添加元素，且div的高度超过iframe的高度后，发现iframe无法滚动了！试了下firefox正常，safari、chrome异常，这是什么bug。。。后来发现，只要拖动下窗口，让iframe的高度出现变化，就再次能够滚动了。不得已，只好
复制链接

扫一扫