2

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.

Amin
  • 414
  • 1
  • 11
  • 23
  • It's not possible to capture events inside a iframe from the parent document. Possible workarounds would be to position an element over the iframe (preventing the iframe from getting the event), using [`postMessage`](https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage), or (if on the same domain) binding an event listener inside the iframe from the parent. – Alexander O'Mara Sep 28 '14 at 23:37
  • Actually there is a way to solve this problem but that why wont work with IE. I used pointer-events: none; It's working with Firefox but not with IE.. I'm looking for solution. – Amin Sep 29 '14 at 00:20

1 Answers1

2

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/

Nick
  • 23
  • 4