Making the scroll keys scroll the desired page element

Question

I have a DIV on my page that scrolls and there are no other elements on the page. (The page layout is fixed using the controls above and below the DIV itself.) I would like the arrow keys and page up / down pages to scroll through the DIV under any circumstances, but I cannot do this if the DIV does not actually have focus. other input fields in other DIVs that often have focus. I tried to capture the arrow keys and page up / down on the "keydown" event at the document level and directly simulate the same event ( using the answers from this question) in the DIV which should scroll, but the scroll does not occur. I know that an event is dispatched because if I attach an event handler, I see it, but for some reason it does not cause scrolling. I also tried setting the "tabIndex" attribute to a DIV without a difference.

How can I assign a specific item to receive certain keys? It is extremely irreconcilable for the user to require that a particular element focus on certain keys for operation, when these keys make sense for only one element on a page. The need to constantly switch focus from another element to a scrollable area for scrolling and back to enter data is simply unacceptable.

I have seen suggestions that scrolling can be modeled in other ways, but I want to avoid this route because it does not always lead to the same results, and I also want to generalize it to other kinds of key events and actions except scrolling.

Answer 1

You can scroll through any element by editing its scrollTop DOM property .

keydown , ( which event) , , ( , ..), div. .

Answer 2

KeyDown DIV.

$(document).ready(function(){


$(document).on("keydown", handleKeyDown);

 function handleKeyDown(evt) {

var code = parseInt(evt.keyCode); // the key Code of the key which was pressed during the event /and parses it and returns a 'integer'.


    if(code == 38){ // 38 is the keycode for UP key on the keyboard
    alert("up");
    } else if(code == 40) // 40 is the keycode for down key on the keyboard.
    alert("down");
    }
    }
  });

, Tadeáš Peták, scrollTop DOM , .