CODEWITHSUNDEEP
javascripthtmlcssiframescroll
Amin
Amin

Reputation: 434

mouse scrolling wheel not working when the cursor is on the iFrame

Here is my Html:

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

and Here is my CSS 

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

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!

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

Thanks in Advance.

Upvotes: 2

Views: 5677

Answers (1)

Nick
Nick

Reputation: 21

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.

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/

Upvotes: 1

Related Questions