How can I prevent an HTML page from scrolling when arrow keys are pressed if an iframe inside it is focused?

I'm gettting this error in Chrome

The iframe is focused, I know its focused. The parent scrolls anyway.

How can I prevent an HTML page from scrolling when arrow keys are pressed if an iframe inside it is focused?

I'm gettting this error in Chrome

The iframe is focused, I know its focused. The parent scrolls anyway.

• javascript
• html
• scroll

• Do you have control over the content in the iframe? – user287466 Commented Jul 8, 2010 at 21:12
• yes, and its on the same domain – John Stimac Commented Jul 8, 2010 at 23:59
• IE 6+, FF3+, Chrome: all of them does what you've just said by default. I click on the iframe and press arrow down. The iframe scrolls the page doesn't. What do you want? – gblazex Commented Jul 14, 2010 at 1:40
• not tested yet solution: CSS overscroll-behavior - not supported by IE, Safari(Mac/iOS), but seems that WebKit will implement it in future – rejnok Commented Mar 9, 2021 at 10:09

5 Answers 5

The following code inside the iframe document will prevent it from scrolling:

document.onkeydown = function(evt) {
    evt = evt || window.event;
    var keyCode = evt.keyCode;
    if (keyCode >= 37 && keyCode <= 40) {
        return false;
    }
};

This code does the trick:

JavaScript

<script type="text/javascript">
  function focusOnIframe(iFrameID) {
    if (frames[iFrameID]!=undefined)
      frames[iFrameID].focus(); // Works in all browser, except Firefox
    else
      document.getElementById(iFrameID).focus();  // Works in Firefox
  }
</script>

HTML (example)

<input type="button" id="setfocus" value="Set focus" onclick="focusOnIframe('myiframe')" />

<p>Bla<br />Bla<br />Bla<br />Bla<br />Bla<br /></p>  <!-- Just some filler -->

<iframe id="myiframe" src="yourpage.html"></iframe>

<p>Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br /></p>  <!-- Just some filler -->

I've tested it in Firefox 3.6.6, Iron 5.0.380, Opera 10.60, IE 6 and IE 8.

Answer for someone with no access to source of page loaded to the iframe:

I resolved the problem with scroll event propagating to parent element (main html document) by dividing whole page to 2 divs with CSS position:fixed, 1st with whole html page (parent) and 2nd with iframe only, like dividing screen to halfs and seeing 2 browser windows on split screen. Or more flexible upgrade: Make the 1st div's CSS width:100vw;height:100vh; (+ finetune CSS top|left|bottom|right) and 2nd div resizable by CSS resize (resize:vertical|horizontal|both) or any smarter JS code (eg. jQueryUI)

This works except IE:

window.top.document.onkeydown = function(evt) {
    evt = evt || window.event;
    var keyCode = evt.keyCode;
    if (keyCode >= 37 && keyCode <= 40) {
        return false;
    }
};

You can prevent scrolling with the arrow keys using the following code:

var objImage= null;

            function getKeyAndMove(e){

            var idtestor = document.getElementById('idPlacer2').value; 
                objImage=  document.getElementById(idtestor);               
                objImage.style.position='relative';


                var key_code=e.which||e.keyCode;
                switch(key_code){
                    case 37: //left arrow key
                        moveLeft();
e.preventDefault(); 
                        break;
                    case 38: //Up arrow key
                        moveUp();
e.preventDefault(); break;
                        break;
                    case 39: //right arrow key
                        moveRight();
e.preventDefault(); 
                        break;
                    case 40: //down arrow key
                        moveDown();
e.preventDefault(); break;
                        break;                      
                }
            }
            function moveLeft(){
                objImage.style.left=parseInt(objImage.style.left)-5 +'px';
window.scrollBy(-5, 0);
            }
            function moveUp(){
                objImage.style.top=parseInt(objImage.style.top)-5 +'px';
window.scrollBy(0, -5);
            }
            function moveRight(){
                objImage.style.left=parseInt(objImage.style.left)+5 +'px';
window.scrollBy(5, 0);
            }k`a`
            function moveDown(){
                objImage.style.top=parseInt(objImage.style.top)+5 +'px';
window.scrollBy(0, 5);
            }