htmlinput

input type="number" mouse wheel does not scroll

I'm stumped why the mousewheel will not increment/decrement the value in a simple form element.

<input type="number" step="0.125" min="0" max="0.875">

It works on this snippet just fine, but not when I create a simple generic html document:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <form action="">
        <input type="number" step="0.125" min="0" max="0.875">
    </form>
</body>
</html>

When I view this in several browsers, the mousewheel does not scroll. I've disabled browser extensions and such as well. Several other machines around me behave the same way.

What causes this to not work? Is this an OS/browser issue?

I almost feel like this might be something deeper, possibly the type of mouse/driver issue?

What I have tested on:

Solution

  • Snippet runs in an IFRAME. Put your code into IFRAME and it will work too. Why - I don't know but it works.

    i.e.

    http://codecorner.galanter.net/bla2.htm - doesn't work (code by itself) http://codecorner.galanter.net/bla.htm - works - previous page in an IFRAME

    EDIT: Here's a demo of it working in Chrome 41: http://codecorner.galanter.net/bla_mousescroll.mp4

    EDIT 2: I think I figured it out, and it's not IFRAMEs. In order for scroll event to happen - actual content has to be scrollable. For example if you redo your example like this:

    <!DOCTYPE html>
<html>
<head></head>
<body>
    <form action="" style="width:200px;overflow:scroll">
    <div style="width:300px">
            <input type="number" step="0.125" min="0" max="0.875">
    </div>
    </form>
</body>
</html>

    where container form is smaller then its content - DIV - the scrolling wheel works on number field: http://codecorner.galanter.net/bla3.htm