Question

How to scroll two list separately using jquery keydown function?

          $(document.keydown(function(e1)
        {
            // ul list B - insert data

           if(e.which == leftArrowKey1)
           {
                   // scroll left

           }else if(e.which == rightArrowKey1 || e.which == spacebarKey1)

                  // scroll right                                               
           }
       });

       $(document.keydown(function(e2)
      {
              // ul list B - insert data

           if(e2.which == leftArrowKey2)
           {
              // scroll left

           }else if(e2.which == rightArrowKey2 || e2.which == spacebarKey2)

              // scroll right                     
           }
     });

Upon loading of the document, I can scroll either List B or A but not both within the same loading of the document. In other words, if I first scroll List A, I can not scroll List B. I can only scroll List B after hitting the reload button.

Answer 1

Are the lists in divs or some parent element?
If so just put the keydown events on the parent element not the document.

$('.list').keydown(function(e) {    // for each list trap the keydown event
    var list = $(this);             // store the active list object
    if (e.which == leftArrowKey) {  
          e.PreventDefault();
          // scroll the list element left
    } else if(e.which == rightArrowKey || e.which == spacebarKey)
          e.PreventDefault();
          // scroll the list element right
    }
});