开发者

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

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.

Java开发者_StackOverflow社区script:

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>');
});


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.


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜