Test case for Chromium issue 62645

Text fields containing more content than visible can't be horizontally scrolled with scrollwheel. Includes JS implementation.

by Weston Ruter

HTML

<p><label for=field>In Firefox you can use the scrollwheel to horizontally scroll into view the overflowed contents of the input field; in Chrome (and Safari), you cannot:</label></p>
<input id=field size=70 value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan, orci eget placerat venenatis, quam elit interdum risus, ac scelerisque magna nisl ac tortor. Donec leo erat, placerat non tempor vel, vulputate sed sapien. Aliquam elit leo, egestas sed euismod in, blandit vitae sem. Integer consectetur nulla sed neque pulvinar eu suscipit est porttitor. Nam tristique dolor quis mauris tincidunt in consectetur erat auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc adipiscing nunc eget sem feugiat tincidunt. Aenean pulvinar libero vitae ligula cursus at condimentum augue porttitor. Curabitur volutpat diam ac odio rhoncus sollicitudin. Proin mollis vestibulum elit, ac pretium leo euismod suscipit. Vivamus sit amet metus ac odio laoreet tempus id ac risus. In congue viverra nisl. Nam ultricies diam ac arcu elementum tempor. Fusce id magna dolor.">

<p><input id=shim-enabled type=checkbox> <label for=shim-enabled>Enable my JS implementation of Firefox's behavior</label></p>

<p>See Chromium issue <a href="http://code.google.com/p/chromium/issues/detail?id=62645" title="Text fields containing more content than visible can't be horizontally scrolled with scrollwheel.">62645</a>. Also, <a href="https://gist.github.com/670686">see</a> and <a href="https://gist.github.com/raw/670686/1e892a1734e0ec2ec1dc75c3d137872ae2813b81/mousewheel-scrollable-text-inputs.user.js">install</a> user script.</p>

<footer>
    <address><a href="http://weston.ruter.net/" rel=author target=_blank>Weston Ruter</a> @ <a href="http://x-team.com/" target=_blank>X-Team</a> / <a href="http://xhtmlized.com" target=_blank>XHTMLized</a></address>
</footer>

CSS

p {
    margin-top:1em;
    margin-bottom:1em;
}
body {
    font-size:14px;
    font-family:sans-serif;
}

footer {
    display:block;
    margin-top:1em;
    border-top:solid 1px gray;
    padding-top:0.5em;
    font-size:smaller;
    font-style:italic;
}

JavaScript

document.addEventListener('mousewheel', function(e){
    // This is here just so we can see what Chrome does normally.
    if(!document.getElementById('shim-enabled').checked){
        return;
    }
    
    var target = e.target;
    if(target.nodeName.toLowerCase() == 'input'){
        var scrollLeft = target.scrollLeft - e.wheelDeltaX;
        if(scrollLeft < 0){
            scrollLeft = 0;
        }
        else if(scrollLeft > target.scrollWidth){
            scrollLeft = target.scrollWidth;
        }
        target.scrollLeft = scrollLeft;
    }
}, false);