为什么我的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>');
});

- android.nick

---

另外，我在JSfiddle.net上使用JSlint运行了它，并且它显示没有错误。 - android.nick

“它不起作用…” 不起作用 怎么样？ 与您期望的相反会发生什么？ 您是否在JavaScript控制台中查找错误？ - T.J. Crowder

在Chrome和Safari中，您可以轻弹页面向上或向下滚动。在这些浏览器中不起作用的是：您按下鼠标以抓住页面，但当您向上/向下滑动或轻弹时，它只会突出显示页面上的数字，它应该像您在触摸屏手机上使用浏览器一样向上或向下滑动。我的脚本为每个段落生成以使页面变长，以进行测试，并且在每个浏览器中都有效，但尝试轻弹/拖动页面向上/向下会导致数字被突出显示，就像我正在选择文本一样。 - android.nick

Answer 1

将“body”改为“html”，它就能正常工作。在最新的Firefox和Opera上测试过，你需要检查它是否适用于旧版本。

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

你还可以考虑禁用文本选择，因为当你滚动页面时，它看起来有点奇怪。

- Przemek

Answer 2

我认为你应该使用选择器$('html, body')。

- simoncereska