Question

So I’m creating a custom scroll box, because the standard html < select> box just isn’t cutting it(I need two columns displayed, and couldn’t find how to do this with a < select>). Anyways I have a scrollable table that is working JUST how I want it to. Except for up and down arrow keys trigger an overall scroll rather than selecting either the preceding or proceeding elements in the table.

html < select > with the appropriate binding of up and down
http://jsfiddle.net/a5YJK/

my custom select without appropriate up and down
http://jsfiddle.net/8zgxA/3/

when I run

$('#wrap *').scroll(function(e){}); 

I can’t differentiate between a mouse scroll and a up or down arrow. How do I differentiate?

Answer 1

Just check for e.keyCode or e.which which would be absent for scroll events.

$(window).on('keyup scroll', function(e){
    console.log(e.keyCode); //undefined for mouse scroll

    if(e.keyCode && e.keyCode == 40){
        //down arrow, scroll might occur, so prevent it or do whatever
    }
}); ​

DEMO