jquery - 将鼠标悬停在正文上，上下拖动页面，就像在pdf上一样

我将如何做到这一点，以便可以像在PDF中一样将鼠标悬停在页面的正文上，然后上下拖动页面？

基本上，我希望能够上下拖动整个页面，知道如何执行此操作吗？我不想使用jQuery UI。

最佳答案

好的，这是阶段...

1）您需要在文档主体上有一个恒定的侦听器，以使制表符保持在当前鼠标位置

2）按下鼠标时，您需要滚动到与鼠标移动大致相等的水平（您可以选择滚动速度稍快）

这是在jQuery中执行此操作的示例

var gesturesX = 0;
var gesturesY = 0;

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

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) {
        window.scrollBy(0, startPosition - gesturesY);
        return false;
    }
});

$(document).mousedown( function() {
    startPosition = gesturesY;
    isMouseDown = true;
    timer = window.setTimeout(GetVelocity, 50);
});

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

关于jquery - 将鼠标悬停在正文上，上下拖动页面，就像在pdf上一样，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4872046/