身上的Mousedown并向上或向下拖动页面，就像在pdf上一样
如何制作它以便我可以在页面上的主体上进行mousedown，然后向上或向下拖动页面，就像在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; }); 滚动条问题的快速修复：使用$（document.body）而不是$（document）。
尽管如此，动画有时会表现得很奇怪，特别是对于重复的卷轴。 （例如，向上滚动，以下动画向下滚动）。
由于OP要求类似PDF查看器的滚动（而不是类似iPhone的滚动）不涉及任何类型的动画，我想我们可以把Sohnee的代码节食并写下：
var gesturesY = 0; var startPosition = 0; var isMouseDown = false; $(document.body).mousemove( function (e) { gesturesY = parseInt(e.pageY, 10); if (isMouseDown) { window.scrollBy(0, startPosition - gesturesY); return false; } }); $(document.body).mousedown( function() { startPosition = gesturesY; isMouseDown = true; }); $(document.body).mouseup( function() { isMouseDown = false; return false; });
弗朗切斯科答案的变化，包括沿X轴滚动：
$(function () { var gesturesX = 0 , gesturesY = 0 , startX = 0 , startY = 0 , isMouseDown = false $(document.body).mousemove(function (e) { gesturesX = parseInt(e.pageX, 10) gesturesY = parseInt(e.pageY, 10) if (isMouseDown) { window.scrollBy(startX - gesturesX, startY - gesturesY) return false } } ) $(document.body).mousedown(function () { startX = gesturesX startY = gesturesY isMouseDown = true return false } ) $(document.body).mouseup(function () { isMouseDown = false return false } ) } )
定义CSS类以将光标设置为pdf阅读器，在拖动滚动时关闭手，在不滚动时打开手。
.closehand { cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important; } .openhand { cursor: hand; }
在页面上定义要放置要滚动的内容的div，并附加到事件侦听器。 在示例中（ 弗朗西斯科答案的变化）我使用#draggable链接div。 mousemove会导致拖动。 mousedown将检测用户开始滚动。 单击将检测用户完成拖动。 我尝试了鼠标，但让页面快速恢复到初始位置。
mouseout检测用户是否在仍然按住鼠标的情况下移出可滚动区域。
var gesturesY = 0; var startPosition = 0; var isMouseDown = false; $('#draggable').mousemove( function (e) { gesturesY = parseInt(e.pageY, 10); if (isMouseDown) { $(this).removeClass('openhand'); $(this).addClass('closehand'); window.scrollBy(0, startPosition - gesturesY); return false; } }); $('#draggable').mousedown( function() { startPosition = gesturesY; isMouseDown = true; return false; }); $('#draggable').click( function() { $(this).removeClass('closehand'); $(this).addClass('openhand'); isMouseDown = false; return false; }); $('#draggable').mouseout( function() { $(this).removeClass('closehand'); $(this).addClass('openhand'); isMouseDown = false; return false; });