scrollLeft on body not working in firefox

Question

I am using the jQuery mousewheel plugin to allow the browser to perceive up and down scrolls as left and right. The code is simple:

$('body').bind('mousewheel', function(event, delta) {
     this.scrollLeft -= (delta * 5);
});

You can test out this functionality on a horizontal scrolling page: http://jsfiddle.net/Ema2B/13/

This works great in chrome. Scrolling down scrolls the content pane right. If you bring this into firefox, it DOES NOT work. I ran some tests, and firefox does see the correct delta value, but it does not understand scrollLeft for some reason. I set up a simple test to verfiy this:

$("a.logo").on("click", function(){
      $(body).scrollLeft(300);
});

Again, this works great in chrome, but not firefox. Why does firefox not allow for scrollLeft?

NOTE: Overflow:hidden is set for the body to disable scrollbars. Test out the fiddle in chrome and firefox to see.

apply it on the document `$(document).scrollLeft(delta);`and scrolleft is not used like that "-=" you just need to do scrollLeft(number) — Sebastian Uriel Murawczik, Aug 01 '13 at 20:54
that is not working for me, are you able to get it to work within the fiddle? — JCHASE11, Aug 01 '13 at 20:59
$('body').bind('mousewheel', function(event, delta) { $(document).scrollLeft((delta + 100)); //console.log(delta); }); that makes it move a little at least, you could go on from there, good luck — Sebastian Uriel Murawczik, Aug 01 '13 at 21:00
this does not work, it 'vibrates': http://jsfiddle.net/Ema2B/16/ — JCHASE11, Aug 01 '13 at 21:04

score 8 · Answer 1 · answered Aug 01 '13 at 21:46

8

To get it working on Firefox the selector must have $(“html”) in addition to body. See the snippet below:

$("html, body").mousewheel(function(event, delta) {
    this.scrollLeft -= (delta * 30);
});

answered Aug 01 '13 at 21:46

JCHASE11

3,901
19
69
132

scrollLeft on body not working in firefox

1 Answers1