当光标在iFrame上时，鼠标滚轮不工作 [英] mouse scrolling wheel not working when the cursor is on the iFrame

问题描述

这是我的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：function，但没有效果！

As I know, overflow-x: scroll; is not necessary, even I removed it, but still It's same. I'm using this for parallax web scrolling. For your information, I tried to use z-index: function, but not effected!

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

Actually mouse scrolling is working in other web areas but not in iFrame specific area.

先谢谢。

推荐答案

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

You can just position a transparent div over it. I shaded it green a little so you can see it. If you remove the .iframeHat, the iframe is scrollable.

希望这对您有用，只要您在iframe中没有任何内容，您打算将用户设置为与...互动。

Hopefully this works for you, as long as you don't have any content within the iframe you intend users to interact with.

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/

这篇关于当光标在iFrame上时，鼠标滚轮不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！