How to change HTML input using JavaScript scroll event

I'd like to have input value in my input element change when a user hovers their mouse over the input and scrolls up and down. I've tried adding an onscroll listener to the input but it doesn't seem to do anything. I'd like to use plain JS but am willing to use jQuery. Thanks for the help.

Clarification: I don't want to use the up and down buttons. I want to use be able to hover over the input and then scroll which in change increase or decreases the input value. Perhaps using a container div is needed?

Heres a codepen.

HTML
<input id="my-input" type="number" min="0" max="100" />
CSS
#my-input {
  width: 50px;
  height: 50px;
}
JS
var myInput = document.getElementById('my-input');
myInput.value = 0;
myInput.onscroll = function(e) {
  // this is never printed
  console.log('scrolling');
}

Answers


This line

console.log('scrolling');

doesn't execute because there isn't any scrolling. In the inputs, up-arrow and down-arrow act as an increaser and reducer. So onscroll event never work on inputs.


oninput event would be a good alternative in this case:

var myInput = document.getElementById('my-input');
myInput.value = 0;
myInput.oninput = function(e) {
  console.log('scrolling');
}
#my-input {
  width: 50px;
  height: 50px;
}
<input id="my-input" type="number" min="0" max="100" />

You have to use the onmousewheel event. See this. Warning: seems that there isn't reliable x-browser support.

PS Codepen updated as well.

JS
var myInput = document.getElementById('my-input');
var myInputCntnr = document.getElementById('my-input-cntnr');
myInput.value = 0;
myInputCntnr.onmousewheel = function(e) {
  console.log(e.deltaY);
  if(e.deltaY > 1) {
    myInput.value++;
  } else if (e.deltaY < -1) {
    myInput.value--;
  }
}

Need Your Help

Generating objects in python 3.4.3

python class object iteration

So I have had to try and generate objects during the runtime of my code before now, and have failed every time. As a very simple example, I want the commented stuff to happen when I run the program...

Crystal reports foreach loop in the formula field

crystal-reports-2008

Please help me to get the count of profile Ids foreach category in crystal report formula field.