мыши колесо прокрутки не работает, когда курсор находится на плавающем фрейме

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; } 

Как я знаю, переполнение-х: прокрутка; не нужно, даже я удалил его, но все равно. Он такой же. Я использую это для прокрутки веб-параллакса. Для вашей информации я попытался использовать функцию 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/