Why does my Javascript/jQuery work in Chrome and Safari but not firefox, IE9, or Opera?

Question

http://jsfiddle.net/nicktheandroid/tfZns/4/

You grab the page and fling it up or down, kind of like an android or iphone. It works in Chrome and Safari (webkit) but it does not work in firefox, ie9 or Opera.

I got help with some of this script, and i'm really not sure what's wrong for it not to work in those browsers. I thought something in Javascript/Jquery would work the same in pretty much every browser, guess I was wrong.

In Webkit browsers you can mousedown on the page, then flick up or down and release the mouse button and the page will scroll/slide, like how you flick or drag your finger across a touchscreen phone and it scrolls the browser page up or down. In Firefox, IE9, and Opera, trying to mousedown, then flick/drag only results in the numbers on the page being highlighted, the page doesn't scroll like it should.

Javascript:

var gesturesX = 0;
var gesturesY = 0;

var startPosition = 0;
var velocity = 0;
var isMouseDown = false;
var startScrollTop = 0;

var timer;

function GetVelocity() {
    velocity = startPosition - gesturesY;
}

$(document).mousemove(function(e) {
    gesturesX = parseInt(e.pageX, 10);
    gesturesY = parseInt(e.pageY, 10);
    $("#mouse").html(gesturesY);
    if (isMouseDown) {
        var scrollToPosition = startScrollTop + (startPosition - gesturesY);
        $("body").scrollTop(scrollToPosition);
        return false;
    }
});

$(document).mousedown(function() {
    if ($("body").is(':animated')) {
        $("body").stop(true, false).trigger('mouseup');
    }
    startPosition = gesturesY;
    startScrollTop = $("body").scrollTop();
    isMouseDown = true;
    timer = window.setTimeout(GetVelocity, 50);
    $(document).everyTime(50, function(i) {
        velocity = startPosition - gesturesY;
    });
});

$(document).mouseup(function() {
    isMouseDown = false;
    if (velocity !== 0) {
        $Body = $("body");
        var distance = velocity * 10;
        var scrollToPosition = $Body.scrollTop() + distance;
        $Body.eq(0).stop().animate({
            scrollTop: scrollToPosition
        }, 1000);
        velocity = 0;
    }
    return false;
});

// create a ton of numbers to make the page long - below
$("#test p").each(function(index) {
    $(this).prepend('<span class="commentnumber">' + index + 1 + '</span>');
});

Also, I ran it through JSlint on JSfiddle.net and it said there were no errors. — android.nick, Oct 07 '11 at 08:46
*"...it does not work..."* Does not work **how**? What happens instead of what you expect? Have you looked for errors in the JavaScript console? — T.J. Crowder, Oct 07 '11 at 08:48
In Chrome and Safari, you can flick the page up or down, and it will scroll that direction. In those browsers it doesn't work in: You mousedown to grab the page, but when you slide or flick it up/down it just highlights the numbers on the page, it should slide up or down like how your finger on a touchscreen phone works in the browser. My script generates for each paragraph to make the page long, for testing, and that works in every browser, but trying to flick/drag the page up/down ends in the numbers being highlighted like I was selecting text. — android.nick, Oct 07 '11 at 08:55

score 2 · Accepted Answer · edited May 23 '17 at 12:27

2

Change "body" to "html" and it'll work. Tested on newest Firefox and Opera, you'll have to check if it works on older versions.

$("html").scrollTop(scrollToPosition);

You can also consider disabling text selection because it looks a little funny when you scroll the page.

edited May 23 '17 at 12:27

Community

1
1

answered Oct 07 '11 at 08:56

Przemek

6,300
12
44
61

score 2 · Answer 2 · answered Oct 07 '11 at 09:09

2

I think you should use selector $('html, body')

answered Oct 07 '11 at 09:09

simoncereska

3,035
17
24

Why does my Javascript/jQuery work in Chrome and Safari but not firefox, IE9, or Opera?

2 Answers2