Make div with text scroll from left to right, not top to down.

I currently have a 1 line div that has no scroll bars, but is scrollable. When I scroll it with my mousewheel, it scrolls from to开发者_开发技巧p to bottom, but I would like to make it scroll left to right.

I think I know how to do it with iframes, but is it possible to do it without iframes?

Jsfiddle: http://jsfiddle.net/zfJJX/2/

Thanks!

1. Add a mouse wheel listener on the div that you want to scroll
2. In that listener, prevent the default scroll action using e.preventDefault() and e.stopPropagation()
3. add or subtract from divs scrollLeft property depending on whether it's scroll up or scroll down.

some untested sample code:

$("mydiv").onmousewheel = function(e) {
   e.stopPropagation();
   e.preventDefault();

   var delta = 0;
   // normalize the delta
    if (event.wheelDelta) {
        // IE
        delta = event.wheelDelta / 60;
    } else if (event.detail) {
        // ff and chrome
        delta = -event.detail / 2;
    }
    e.target.scrollLeft += delta;
};