how do i prevent scroll down in javascript?

Question

ok... I might be a lazy one to search but it is a bit annoying that all I can find is

"how can i set scroll down event" when I searched "how do i prevent scroll down".

in my javascript code, I set event for down arrow key. When I press down arrow

from the browser, the browser not only does an event I set, but also does

scrolling down the page which is not I intended to. So here is my question.

How can I disable scroll down function which occurs when I press down arrow?

any help will be appreciated.

jfriend00 · Accepted Answer · 2012-03-22 06:26:59Z

2

If you want to prevent the vertical scrollbar and any vertical scrolling action by the user, you can use this javascript:

document.body.style.overflowY = "hidden";

Or, this can also be set with a CSS rule:

body {overflow-y: hidden;}

On the other hand, if what you're trying to do is to prevent the default key handler for the down arrow from doing anything after you process the down array, then you need to call e.preventDefault() like this:

function myKeyDownHandler(e) {
    // your code here
    e = e || window.event;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;   // older versions of IE (yuck)
    }
    return false;
}

A cleaner way if you need to do this in more than one place would be to make your own cross browser function for this:

function preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;   // older versions of IE (yuck)
    }
}

function myKeyDownHandler(e) {
    // your code here
    preventDefault(e);
    return false;
}

This is one of those perfect examples where a cross-browser framework (jQuery/YUI/etc) saves you time because they've already done all this cross-browser work for you.

Here's an interesting article on preventDefault and stopPropagation().

edited Mar 22, 2012 at 6:26

answered Mar 22, 2012 at 6:07

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GoldenNewby Over a year ago

I don't think scrolling down the page without a scrollbar is what they want

jfriend00 Over a year ago

@GoldenNewby - perhaps you're right. The question is a little ambiguous so I added a second option for that other interpretation.

GoldenNewby · Accepted Answer · 2012-03-22 06:16:01Z

1

Here is an example page that doesn't allow for the use of the arrow keys for scrolling:

<script>
document.onkeydown = function(evt) {
    evt = evt || window.event;
    var keyCode = evt.keyCode;
    if (keyCode >= 37 && keyCode <= 40) {
        return false;
    }
};
</script>
<body style="height:3000px;">

</body>

answered Mar 22, 2012 at 6:16

GoldenNewby

4,4728 gold badges36 silver badges44 bronze badges

Collectives™ on Stack Overflow

how do i prevent scroll down in javascript?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related