CODEWITHSUNDEEP
javascripthtmlcssiframe
Mohamed Hussain
Mohamed Hussain

Reputation: 7703

When Mouse is in Iframe the main page is not scrolling in firefox

See this fiddle http://jsfiddle.net/shmdhussain/jop93dhr/2/ , I have iFrame Content area inside my main page, but when my mouse is inside the iframe area, my main page is not scrolling , happens only in firefox. tested and working fine in chrome and safari.

Thanks in advance for any help.





    iframe = document.getElementById('iframeid');
    div_el = document.createElement('div');
    div_el.innerHTML = "<ul><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li><ul>";
    iframe.contentWindow.document.body.appendChild(div_el);


    <iframe id="iframeid" height="200px" src="about:blank">
        

            
            
     </iframe>
      <ul>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <li>bar</li>
        <ul>

Upvotes: 1

Views: 1349

Answers (1)

Hugo
Hugo

Reputation: 71

It's the default behavior of all browsers: if you have scroll in your iframe and mouse hover it, scroll priority will be given to this iframe.

Avoid having scroll in your iframe if you do not want this behavior (its content's height must be inferior than its height).

if you don't want to fix your iframe's height, you can create a transparent element covering it... but it's really dirty...

Upvotes: 3

Related Questions