Question

我试图让用户使用鼠标垂直和水平移动页面。为此，我使用jQuery的scrollTop（）和scrollLeft（）函数在用户按下并移动鼠标时滚动文档。我的代码工作正常，但页面在移动时会强烈震动。

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

是什么原因导致这种不稳定的行为？

Answer 1

为你的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的演示。

Answer 2

你正在'拍打'。如果在第134行放置断点并观察相关值，您可以看到它发生：

$（document）.scrollTop（）
downScrollTop
Math.floor（e.pageY-霜霉病）

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

摇摇欲坠的scrollTop和scrollLeft

2 个答案: