Prevent scrolling with arrow keys

Question

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.

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, Jul 14 '10 at 01:40
`not tested yet solution:` CSS [overscroll-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior) - not supported by IE, Safari(Mac/iOS), but seems that WebKit will implement it in future — rejnok, Mar 09 '21 at 10:09

Tim Down · Accepted Answer · 2017-11-13T11:11:23.920

16

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

edited Nov 13 '17 at 11:11

answered Jul 08 '10 at 21:09

Tim Down

318,141
75
454
536

1

that will prevent the iframe from scrolling, but i want to prevent the page from scrolling. – John Stimac Jul 08 '10 at 21:31
But if the iframe is focussed, how can arrow keys be affecting the parent document? – Tim Down Jul 15 '10 at 08:37
It's because the way he focus it doesn't work as it should. My answer provide him with the code to fix that issue. – Gert Grenander Jul 17 '10 at 14:17

score 1 · Answer 2 · answered Jul 14 '10 at 02:49

1

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.

answered Jul 14 '10 at 02:49

Gert Grenander

16,866
6
40
43

you understand that the question involves scrolling, right? not focusing? – John Stimac Jul 15 '10 at 02:10
The problem is that your focus isn't working, correct? I.e. when the iframe is focused and you use the arrow keys, it scrolls the parent. The above code sets the focus and the parent doesn't scroll. – Gert Grenander Jul 15 '10 at 02:39
And when you use up and down key, the parent scrolls, correct? – Gert Grenander Jul 15 '10 at 09:50
From skimming over the text and having a similar problem: I think the issue is that scrollbars on a page element "spill over" to the body. When you reach the bottom of the stuff you're scrolling, the body scrolls next. (Which is completely counter-intuitive imho). – Mantriur Aug 22 '15 at 15:49
This don't solve anything, problem still! – rejnok Mar 05 '21 at 18:11

score 0 · Answer 3 · answered Mar 09 '21 at 09:48

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)

gblazex · Answer 4 · 2010-07-14T02:56:27.627

-1

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

edited Jul 14 '10 at 02:56

answered Jul 14 '10 at 02:43

gblazex

49,155
12
98
91

score -1 · Answer 5 · edited Aug 16 '18 at 00:15

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

Prevent scrolling with arrow keys

5 Answers5

Linked