Geek Answers Handbook

Prevent scrolling jquery scroll box

I am developing a replacement for the selected menu in jquery.
First I have to set up a new selection menu by simply adding tabindex="0" to the container.
Then I turn off the focus on the original selection menu and give focus to the new one. When the new one focuses and you press the up and down arrows, the parameters change accordingly, but there is a big problem. When you press the arrows, the body also moves.
I tried all these solutions so far no luck:

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

Check out the code here http://pastebin.com/pVNMqyui This code is from the Ideal Forms development version http://code.google.com/p/idealforms , which I will be releasing soon, with keyboard support.

Any ideas why this is not working?

EDIT: Solved!

Found answer to this post disable jquery link tag

 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!

+3
source share
5 answers

Found an answer to this post include jquery link tag

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

In your keydown handler, for the 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 that this answer extends to the native browser in onkeydown depending on how / which structure you are using.

+2
source

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

0
source

It is very simple. You don’t even need jQuery for this.

JQuery

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

Javascript

 <body style="overflow: hidden">

Adding style:

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

if you want to associate 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 } });
-1
source

The best way to achieve this is to set the body overflow to hidden

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

After the process just does the opposite

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

More articles:


All Articles