title: Jquery - disable window scrolling with arrow keys on focus of list
body: <p>I am trying to make a list navigable using the up/down arrow keys - which worked but pressing these keys causes the window to scroll which is very annoying. So I want to disable to movement of the page using the arrow keys when this box is focused.</p>
  
  <p>I tried:</p>
  
  <pre><code>$('.selectionList').focus(function(event){
      $(document).keydown(function(e) {
      return false;
      });
  });
  
  $('.selectionList').blur(function(event){
      $(document).keydown(function(e) {
      return true;
      });
  });
  </code></pre>
  
  <p>But the re-enabling of these keys did not work to the page wouldn't scroll without the scrollbar. I found <a href="https://stackoverflow.com/questions/1056562/simple-javascript-question-how-do-i-prevent-scrolling-with-arrow-keys-but-not-t">this</a> which I could use but this would disable the use of these keys permanently, which I do not want to happen.</p>
  
  <p>The $('.selectionList').keyup() event is as follows:</p>
  
  <pre><code>$('.selectionList').keyup(function(event){
      if (event.keyCode == 13)      //enter
      {
          $('.listNameBox a').click();
      }
      else
      {
      if ((event.keyCode == 38) &amp;&amp; ($(this).children('li:eq(' + ($('.selectionList li.selected').index() - 1) + ')').length &gt; 0)) //up
          {
              selectListItem($(this).children('li:eq(' + ($('.selectionList li.selected').index() - 1) + ')'));
          }
      else if ((event.keyCode == 40) &amp;&amp; ($(this).children('li:eq(' + ($('.selectionList li.selected').index() + 1) + ')').length &gt; 0)) //down
          {
              selectListItem($(this).children('li:eq(' + ($('.selectionList li.selected').index() + 1) + ')'));
          };
      }
  });
  </code></pre>
  
  <p>Any help would be appreciated.</p>