2

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
laggingreflex
  • 32,948
  • 35
  • 141
  • 196
  • Further to what Amit states, where are your scroll bars in the fiddle? – Lee Taylor Apr 28 '14 at 02:45
  • @LeeTaylor it's an empty textbox. I want to fill it with numbers based on the scroll event itself. Increment the number on scroll-up and decrement on scroll-down. – laggingreflex Apr 28 '14 at 02:52
  • Yes, that's the point. There are no scrollbars on the text box. Therefore you will not receive a scroll event. – Lee Taylor Apr 28 '14 at 03:00

2 Answers2

2

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

Have you tried using textarea? It works fine.

Demo

Amit Joki
  • 58,320
  • 7
  • 77
  • 95
  • It doesn't work for me. At least in Jsfiddle. That's what's wrong with your answer. Otherwise I'll upvote this answer. – Adam Barak Sep 02 '14 at 06:51
  • You have to type in the text area (so that it now scrolls) for it to work. – Tom Jul 30 '21 at 23:46
0

jQuery Mouse Wheel Plugin

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

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

Community
  • 1
  • 1
user3678108
  • 24