摇晃的 scrollTop 和 scrollLeft

Question

我正在尝试使用户能够使用鼠标垂直和水平移动页面。为此，我使用 jQuery 的 scrollTop() 和 scrollLeft() 函数在用户按下并移动鼠标时滚动文档。我的代码运行良好，但页面在移动时会剧烈抖动。

我已经能够用一小段代码产生同样的问题。
这是live demo。

有什么想法会导致这种不稳定的行为吗？

Answer 1

你在“颤抖”。如果您在第 134 行设置断点并观察相关值，您可以看到它发生了：

• $(document).scrollTop()
• 向下滚动顶部
• Math.floor(e.pageY-downY)

拖动文本一次以开始循环，然后在您通过断点时观察它们循环。您对 scrollTop 和 scrollLeft 的更改正在触发 mousemove 事件。我不确定它是否会在所有浏览器中都这样做，但它显然在 Chrome 中会这样做。

Answer 2

为您的 jQuery 尝试类似的方法。这是一个有效的JSFiddle

var down=false;
var downX=0;
var downY=0;

$(document).ready(function(){
    $(document).mousedown(function(e){
        e.preventDefault();
        down=true;
        downX=e.clientX;
        downY=e.clientY;
        return false;
    }).mouseup(function(e){
        e.preventDefault();
        down=false;
        return false;
    }).mousemove(function(e){
        e.preventDefault();
        if(down){
            $(document).scrollTop($(document).scrollTop()-e.clientY+downY)
                .scrollLeft($(document).scrollLeft()-e.clientX+downX);
            downY = e.clientY; //Reset the cursor's last Y position
            downX = e.clientX; //Reset the cursor's last X position
        }
        return false;
    });
});

这是改编自 draggable.js jQuery 插件。我强烈建议您使用它。它为您完成所有这些工作。这是它的演示http://hitconsultants.com/dragscroll_scrollsync/scrollpane.html。