Position: absolute and overflow: automatically prevent scrolling number entry

Question

I ran into a problem when using html5 number input inside a div with position: absolute; overflow: auto position: absolute; overflow: auto on Chromium version 23.0.1271.64 (165188)

Typically, scrolling the mouse wheel on a focused input of a number increases and decreases the value in the field. But inside a div with position: absolute; overflow: auto position: absolute; overflow: auto content of the div just scrolls if it doesn't scroll anywhere.

Fiddle: http://jsfiddle.net/9M9nx/7/

Is there a way to always allow an input element to receive a scroll event?

Answer 1

I think you have to hack this one. This hack works:

http://jsfiddle.net/9M9nx/12/

Here I used jQuery to change the focus overflow property of the scroll parent and blur the events on the input number.

 $('.scroller input[type=number]').focus(function(){ $(this).closest('.scroller').css('overflow','hidden'); }); $('.scroller input[type=number]').blur(function(){ $(this).closest('.scroller').css('overflow','auto'); });​