将鼠标悬停在正文上，上下拖动页面，就像在pdf上一样 [英] Mousedown on body and drag the page up or down, like on a pdf

问题描述

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

How would I make it so I can mousedown on the body on my page, then drag the page up or down, like you can in a PDF?

基本上，我希望能够上下拖动整个页面，您知道如何执行此操作吗?我不想将jQuery UI用于任何东西.

Basically I want to be able to drag the whole page up and down, any idea how to do this? I don't want to use jQuery UI for anything.

推荐答案

好的，以下是各个阶段...

Okay, here are the stages...

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

1) You need to have a constant listener on the body of the document that will keep tabs on the current mouse position

2)按下鼠标时，您将需要大致等于鼠标的移动来滚动(您可以选择滚动得更快一点)

2) On mouse down you will need to scroll roughly equal to the mouse movement (you could choose to scroll slightly faster)

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

Here is an example of doing this in 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;
});

这篇关于将鼠标悬停在正文上，上下拖动页面，就像在pdf上一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！