Prevent window scroll jquery

Question

I'm developing a select menu replacement in jquery.
First I've to make the new select menu focusable by just adding tabindex="0" to the container.
Then, I disable focus on the original select menu and give focus to the new one. When the new one is focused and you press the up and down arrows the options change accordingly but there's a big problem. As you press the arrows the body moves too.
I tried all these solutions so far with no luck:

$(window).unbind('scroll');
$(document).unbind('scroll');
$('body').unbind('scroll');
$(window).unbind('keydown');
$(document).unbind('keydown');

Check the code here http://pastebin.com/pVNMqyui This code is from the development version of Ideal Forms http://code.google.com/p/idealforms that I'm about to release soon, with keyboard support.

Any ideas why this is not working?

EDIT: Solved!

Found the answer on this post jquery link tag enable disable

var disableScroll = function(e){
    if (e.keyCode === 40 || e.keyCode === 38) {
        e.preventDefault();
        return false;
    }
};
// And then...
events.focus: function(){ $(window).on('keydown', disableScroll); }
events.blur: function(){ $(window).off('keydown', disableScroll); }

It works!

perhaps this is a job for `event.preventDefault();` in the handler for any event that might cause the window to scroll... — Aaron, Dec 13 '11 at 07:28

score 2 · Answer 1 · answered Dec 13 '11 at 08:01

In your keydown handler, for up and down keys, return false like this:

'keydown' : function (e) {
    if (e.keyCode === 40) { // Down arrow
        that.events.moveOne('down');
    }
    if (e.keyCode === 38) { // Up arrow
        that.events.moveOne('up');
    }
    return false;
}

Also, make sure this return gets propagated to the browser's native onkeydown depending on how/which framework you're using.

score 0 · Answer 2 · edited Sep 25 '13 at 06:31

0

You need to cancel the keydown event for arrow keys. Use either e.preventDefault() or return false in your .keydown() handler if an arrow key has been pressed.

edited Sep 25 '13 at 06:31

Rich

5,603
9
39
61

answered Dec 13 '11 at 07:28

gilly3

87,962
25
144
176

score 0 · Accepted Answer · edited May 23 '17 at 12:02

0

Found the answer on this post jquery link tag enable disable

var disableScroll = function(e){
    if (e.keyCode === 40 || e.keyCode === 38) {
        e.preventDefault();
        return false;
    }
};
// And then...
events.focus: function(){ $(window).on('keydown', disableScroll); }
events.blur: function(){ $(window).off('keydown', disableScroll); }

edited May 23 '17 at 12:02

Community

1
1

answered Feb 13 '12 at 05:09

elclanrs

92,861
21
134
171

score -1 · Answer 4 · answered Aug 17 '13 at 10:52

-1

The Best way to achive the same is to set overflow of the body to hidden

$("body").css("overflow", "hidden");

After the process just do the opposite

`$("body").css("overflow", "hidden");

answered Aug 17 '13 at 10:52

Tarun Gupta

6,305
2
42
39

dku.rajkumar · Answer 5 · 2011-12-13T08:05:16.420

Its very simple.you need not even need jQuery for this.

jQuery:

$("body").css("overflow", "hidden");

javascript

<body style="overflow: hidden">

Adding in style:

<style>
 body {width:100%; height:100%; overflow:hidden, margin:0}
 html {width:100%; height:100%; overflow:hidden}
</style>

if you want to bind the arrow keys,try something like:

$('body').keydown(function(e){
    e.preventDefult();
    if(e.keyCode == 37) // for left key
    {
        // implement focus functionality
    }
    if(e.keyCode == 38) // for up key
    {
        // implement focus functionality
    }
    if(e.keyCode == 39) // for right key
    {
        // implement focus functionality
    }
    if(e.keyCode == 40) // for doqn key
    {
        // implement focus functionality
    }
});

The problem with this approach is that the scrollbar dissapears making the content shift and then you'll have to calculate the offset somehow. I tried this, too complicated and unnecesary... — elclanrs, Dec 13 '11 at 07:54

Prevent window scroll jquery

5 Answers5

Linked