How to attach a scroll event to a text input?

Question

I'm trying to attach a scroll event to a text input so that when you scroll-up, while the textbox is focused, it increments the numbers in it and when you scroll-down it decrements the number in it. If it's empty or NaN it should just replace it with a 0 and continue on.

I've managed to pull this off for touchmove and click-and-drag, but for some reason the scroll event isn't attaching to the text box.

http://jsfiddle.net/KBKA7/

$('input').scroll(function(event) {
    $('div').append('scrolled1');
});

$('input').add('.scrollable').on('scroll', function(event) {
    $('div').append('scrolled2');
});

No events are being fired.

Answer 1

jQuery Mouse Wheel Plugin

$('input').mousewheel(function(event) {
    $('div').append('scrolled ');
});

http://jsfiddle.net/KBKA7/2/

Answer 2

It is due to the fact that <input type="text"> cannot be scrolled.

Have you tried using textarea? It works fine.

Demo