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