Автоматическая прокрутка внезапно останавливается

Question

Я написал следующий скрипт с простой целью прокрутки вправо, когда пользователь наводит курсор на правую сторону экрана, и прокрутки влево, когда пользователь наводит курсор на левую сторону экрана. Он работает хорошо, за исключением того, что если вы оставите мышь в одном и том же месте на слишком долгое время, прокрутка прекратится до достижения конца. Он начинает прокручиваться снова, если впоследствии вы двигаете мышью. Я не могу понять, почему это происходит, так как код запускает бесконечный временной цикл, который проверяет положение мыши и соответственно прокручивает. Как будто положение мыши перестает сообщаться, если мышь неактивна слишком долго. Есть идеи?

var mouseX = 0;
var scrollX = 0;
var timer;
$(document).ready(function() {
    // Record the mouse position if the mouse is moved
    $(document).mousemove(function(e) {
        mouseX = e.pageX;
    });
    // Record the scroll position if the page is scrolled
    $(document).scroll(function() {
        scrollX = $(window).scrollLeft();
    });
    // Initiate the scrolling loop
    scroll();
});

function scroll() {
    // If the user is hovering over the right side of the window
    if ((mouseX - scrollX) > 0.75*$(window).width()) {
        scrollX += 1;
        $(window).scrollLeft(scrollX);
    }
    // If the user is hovering over the left side of the window
    if ((mouseX - scrollX) < (0.25*$(window).width())) {
        scrollX -= 1;
        $(window).scrollLeft(scrollX);
    }
    // Repeat in 5 ms
    timer = window.setTimeout('scroll()', 5);
}

Answer 1

Я не знаю точно, что не так с вашим кодом, но почему вы не используете анимацию jQuery? Это надежнее, чем писать свой.

//inside $(document).ready():

var which = 0;
$('body').mousemove(function(e) {
    var w_width = $(window).innerWidth();
    var prc = (e.pageX - $(window).scrollLeft())/w_width;

    var next_which = prc < 0.25 ? -1 : (prc > 0.75 ? 1 : 0);

    if (next_which == which)
        return;

    which = next_which;
    $('html,body').stop(true);
    if (which != 0)
        $('html,body').animate({scrollLeft: (which > 0 ? $(document).innerWidth()-w_width : 0)}, 2000);

}).mouseleave(function() {
    $('html,body').stop(true);    
    which = 0;
});
​    ​

См. скрипка

Answer 2

Событие

jQuery mousemove() не срабатывает при e.pageX > $(window).width() (или около того). Похоже, ошибка JQuery для меня. Это может помешать вашему прогрессу!