3

很难在 Internet 上搜索有关此行为的信息，因为我不知道与之相关的术语。我会尽力描述它。

这是几乎所有支持滚动的浏览器元素中通常发生的行为：如果单击鼠标，然后按住按钮将其拖动到滚动区域之外，它将自动向您退出的方向水平或垂直滚动​​。

当您尝试选择页面元素来复制它们时非常有用，但在执行其他自定义操作时必须防止该行为。我试图实现的功能是通过拖动鼠标来拖动页面的能力，就像在 PDF 查看器中突出显示的抓手鼠标工具一样。它用最少的代码工作得很好，但我不知道如何在鼠标离开可滚动区域后禁用这个助手自动滚动。

    $("#scroll_area").on('mousedown', function (e) {
        startPos.x = e.clientX;
        startPos.y = e.clientY; 
        drag = true;
    });
    $(document).on('mousemove', function (e) {
        if (drag) {
            // find relative mouse motion
            var diffX = e.clientX - startPos.x;
            var diffY = e.clientY - startPos.y;
            // scroll our body by the relative amount. 
            document.body.scrollTop -= diffY;
            document.body.scrollLeft -= diffX;
            startPos.x = e.clientX;
            startPos.y = e.clientY; // continue updating
            return false; // if dragging do not perform regular things
        }
    });
    $(document).on('mouseup', function (e) {
        // clean up the drag no matter where you let go of the mouse.
        // don't bother evaluating motion here. 
        drag = false;
    });

我希望 return false 可以解决问题，但事实并非如此。事实上，即使鼠标停止移动（当它被拖出滚动区域时），自动滚动也会继续。

4

1 回答 1

2

你试过preventDefault吗？

$("#scroll_area").on('mousedown', function (e) {
    e.preventDefault();
});

这将防止页面上的所有拖动。然后，您可以仅实现您希望在拖动时发生的功能。

JSFiddle 示例：http: //jsfiddle.net/nwGaF/1/

于 2012-10-17T19:28:56.853 回答