Шаткий scrollTop и scrollLeft

Question

Я пытаюсь разрешить пользователю перемещать страницу по вертикали и горизонтали с помощью мыши. Чтобы сделать это, я использую функции scrollTop() и scrollLeft() jQuery для прокрутки документа, когда пользователь нажимает и перемещает мышь. Мой код работает нормально, но страница сильно дрожит во время движения.

Мне удалось создать ту же проблему с меньшим фрагментом кода.
Вот живая демонстрация.

Есть идеи, что вызывает такое шаткое поведение?

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;
    });
});

Это было адаптировано из плагина jQuery draggable.js. Я настоятельно рекомендую вам использовать его. Он делает всю эту работу за вас. Вот демонстрация этого http://hitconsultants.com/dragscroll_scrollsync/scrollpane.html.

Answer 2

Вы "хлопаете". Если вы установите точку останова в строке 134 и увидите соответствующие значения, вы увидите, что это происходит:

• $ (Документ).scrollTop ()
• downScrollTop
• Math.floor (e.pageY-пуховые)

Перетащите текст один раз, чтобы начать цикл, а затем проследите, чтобы они повторялись по мере продвижения через точки останова. Ваше изменение scrollTop и scrollLeft вызывает событие перемещения мыши. Я не уверен, что он будет делать это во всех браузерах, но в Chrome это очевидно.