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

请参阅fiddle

Answer 2

jQuery的mousemove()事件在e.pageX > $(window).width()（或其附近）时无法触发。对我来说看起来像一个jQuery错误。这可能会妨碍你的进步！

自动滚动突然停止

2 个答案: