CODEWITHSUNDEEP
csshtml
Otto Allmendinger
Otto Allmendinger

Reputation: 28278

position:absolute and overflow:auto prevent number input scroll

I've encountered a problem when using a html5 number input inside a div with position: absolute; overflow: auto on Chromium Version 23.0.1271.64 (165188)

Normally scrolling the mouse wheel on a focused number input increments and decrements the value in the field. But inside a div with position: absolute; overflow: auto, the div contents just scroll unless there is nowhere to scroll.

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

Is there a way to always let the input element receive the scroll event?

Upvotes: 4

Views: 467

Answers (1)

daveyfaherty
daveyfaherty

Reputation: 4613

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

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

Here I've used jQuery to change the overflow property of the scrolling parent, based on the focus and blur events on the number input.

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

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

Upvotes: 1

Related Questions