javascript - 当光标位于 iFrame 上时鼠标滚轮不工作

Question

这是我的 HTML:

<iframe onload="reloadOnce(this)" frameborder="no" src="cloud.php" class="foo1" scrolling="no" seamless="seamless" allowTransparency="true" width="100%" height="90em"></iframe>

这是我的 CSS

.foo1{margin: 0; padding: 0; width:100%; height:90em; overflow-x: scroll; }

据我所知，overflow-x: scroll;没有必要，即使我删除了它，但它仍然是一样的。我将其用于视差网页滚动。供您引用，我尝试使用 z-index: 函数，但没有效果!

实际上，鼠标滚动在其他网络区域有效，但在 iFrame 特定区域无效。

提前致谢。

Answer 1

您可以在其上放置一个透明的 div。我把它涂成绿色，这样你就可以看到了。如果删除 .iframeHat，则 iframe 是可滚动的。

希望这对您有用，只要您在 iframe 中没有您希望用户与之交互的任何内容。

HTML:

<div id="content1"></div>
<iframe id="iframe" src="http://fender.com"></iframe>
<div class="iframeHat"></div>
<div id="content2"></div>

CSS:

#iframe, .iframeHat {
width:300px;
height:300px;
margin-left:50px;
border:none;
}
.iframeHat {
margin-top:-304px;
background-color:rgba(10,100,0,0.5);
position:relative;
z-index:999;
}

http://jsfiddle.net/u940x50x/