issue with horizontal wheel scroll

Question

I have a template that when user use mouse wheel the template scroll horizontally .

but it just work in chrome .

is there any way to scroll horizontally in firefox and IE ?

here is a demo : http://jsfiddle.net/VhERd/

and jquery :

<script>
    $(function() {

       $("body").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);

          event.preventDefault();

       });

    });
</script>
    <script src="http://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>

and at the end sry for my english ;)

https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/mousewheel - mozilla not supported `mousewheel`, please read about solution here http://stackoverflow.com/questions/6735830/how-to-fire-mouse-wheel-event-in-firefox-with-javascript — maximkou, Sep 13 '13 at 17:24
@epascarello, oh, sorry. I see `mousewheel` event instead of plugin. I am slowpoke today:) — maximkou, Sep 13 '13 at 17:29

score 2 · Answer 1 · answered Sep 13 '13 at 17:25

2

It needs to work off the html element, not body element for Firefox.

$("body, html").mousewheel....

answered Sep 13 '13 at 17:25

epascarello

204,599
20
195
236

Teemu · Answer 2 · 2013-09-13T17:52:01.597

1

I've used this function, it's a bit hacky, but does the job.

function scrollPage (e) {
    var delta = e.deltaX || e.wheelDelta,
        dir = (delta > 0) ? -90 : 90;
    if (window.addEventListener && !(window.chrome || window.opera)) {
        dir *= -1;
    }
    window.scrollBy(dir, 0);
    e.returnValue = false;
    if (e.preventDefault) {
        e.preventDefault();
    }
    return false;
}

And attach the event:

if (window.addEventListener && (!window.chrome && !window.opera)) {
    window.addEventListener('wheel', scrollPage, false); // IE9+, FF
} else if (window.chrome || window.opera) {
    window.addEventListener('mousewheel', scrollPage, false); // Chrome & Opera
} else {
    document.attachEvent('onmousewheel', scrollPage); // IE8-
}

A live demo at jsFiddle.

edited Sep 13 '13 at 17:52

answered Sep 13 '13 at 17:24

Teemu

22,918
7
53
106

@alireza Hmm... I tried to add it to your code, didn't get it working. Anyway, works with a [simple layout](http://jsfiddle.net/42t8h/1/). – Teemu Sep 13 '13 at 17:46
@alireza Yep, it was just a timig issue when I tried it. Here's a [working fiddle](http://jsfiddle.net/JFyFc/) with your code. I guess you can convert it to jQuery too, the main issue is the different event names (`onwheel` and `onmousewheel`), also directions are not consistent. – Teemu Sep 13 '13 at 18:06

issue with horizontal wheel scroll

2 Answers2

Linked