javascript - 为什么我的 Javascript/jQuery 可以在 Chrome 和 Safari 中运行，但不能在 Firefox、IE9 或 Opera 中运行？

Question

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

您捕获页面并将其向上或向下甩动，有点像 android 或 iphone。它适用于 Chrome 和 Safari (webkit)，但不适用于 firefox、ie9 或 Opera。

我在这个脚本的一些方面得到了帮助，但我真的不确定它不能在那些浏览器中工作有什么问题。我以为 Javascript/Jquery 中的某些东西在几乎所有浏览器中都可以正常工作，我猜我错了。

在 Webkit 浏览器中，您可以在页面上按下鼠标，然后向上或向下滑动并释放鼠标按钮，页面将滚动/滑动，就像您在触摸屏手机上滑动或拖动手指并向上滚动浏览器页面一样或向下。在 Firefox、IE9 和 Opera 中，尝试按下鼠标，然后轻弹/拖动只会导致页面上的数字被突出显示，页面不会像它应该的那样滚动。

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

Answer 1

将“body”更改为“html”即可。在最新的 Firefox 和 Opera 上测试过，您必须检查它是否适用于旧版本。

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

你也可以考虑disabling text selection因为滚动页面时看起来有点滑稽。