How do I make a div that can scroll left/right using the mousewheel?

Question

But when the user scrolls up and down using the mouse wheel, it scrolls the div left and right.

You're seeing it do this? Or you want it to do this? I urge you to clarify your exact question and post some code. — Sparky, Jun 26 '11 at 20:07
@sparky the title is pretty clear: How do I make a div that can scroll left/right? — Trey, Jun 26 '11 at 20:08
May help: http://stackoverflow.com/questions/258372/css-div-element-how-to-show-horizontal-scroll-bars-only — Jared Farrish, Jun 26 '11 at 20:12
@Trey: Oh really? Is he **REQUESTING** for it to scroll left/right with the mouse-wheel's up/down or is he **OBSERVING** a left/right movement with the mouse-wheel's up/down? Who knows since he hasn't posted the code he's using. — Sparky, Jun 26 '11 at 20:15
@sparky yes really, the first three words "How do I" clearly seem to indicate that he wants to employ this functionality. — Trey, Jun 26 '11 at 20:16
@Trey: Try again. _"But when the user scrolls up and down using the mouse wheel, it scrolls the div left and right."_ **Is this what he wants or what his code is currently doing?** — Sparky, Jun 26 '11 at 20:21
@Sparky, it is what he wants, but it's an ambiguous question. @Owalla, I really, really hope that you have a very good reason to mess with the default browser behaviour. — joakimdahlstrom, Jun 26 '11 at 20:35
i think he meant `up and down` instead of `left and right` in `..using the mouse wheel, it scrolls the div left and right` — Achshar, Jun 26 '11 at 21:01

score 2 · Accepted Answer · answered Jun 26 '11 at 20:07

2

You'll have to use JavaScript. This page details the different events and how to use them:

Mouse wheel programming in JavaScript.

answered Jun 26 '11 at 20:07

Sophie Alpert

139,698
36
220
238

score 1 · Answer 2 · edited Apr 13 '12 at 12:43

I have used prototype to hook the events. This is the simplest I can do to get a div to scroll horizontally using mouse wheel. It doesn't really matter if you keep the overflow to auto/scroll/hidden. Please try it in different browsers. I am not sure about the event in other browsers. I mostly did this in IE as I code in IE.

<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js type="text/javascript"></script>
<div style="width:100px;height:150px;overflow:auto;" id="myDiv">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

<script language="javascript">
    function handleScroll(e) {
        var delta = 0;
        var upScroll = true;

        if (!e) e = window.event;
        if (event.wheelDelta) {
            delta = event.wheelDelta / 120;
        } else if (event.detail) { delta = -event.detail / 3; }

        // increments or decrements the scroll left
        var div =  $('myDiv');
        div.scrollLeft = (div.scrollLeft + Math.round(delta) + ((delta > 0) ? 50 : -50));
    }

    // hook events
    Event.observe($('myDiv'), "mousewheel", handleScroll, false);
    Event.observe($('myDiv'), "DOMMouseScroll", handleScroll, false); // Firefox
</script>

How do I make a div that can scroll left/right using the mousewheel?

2 Answers2