javascript - jQuery - 悬停时停止自动滚动 div

Question

这是上一个问题的后续帖子:jQuery - scroll down every x seconds, then scroll to the top

我已经进一步完善了脚本，但最后一步遇到了一些问题。

我有一个 div，它一次自动移动 50px，直到到达底部，此时它滚动到顶部并再次开始。由于上述问题和一些额外的工作，我的工作完美。

我需要在 div 悬停时停止所有滚动。我已经完成了其中的一部分(悬停时没有增量向下滚动)，但我无法获得完整的图片。即使悬停时，div 仍会滚动到顶部。

这是我的 jQuery 和与之配套的 fiddle : http://jsfiddle.net/wR5FY/1/

var scrollingUp = 0;
var dontScroll = 0;

window.setInterval(scrollit, 3000);

function scrollit() {
    if(scrollingUp == 0 && dontScroll == 0) {
        $('#scroller').animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow');
    }
}

$('#scroller').bind('scroll', function () {
    if (dontScroll == 0) {
        if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            scrollingUp = 1;      
            $('#scroller').delay(2000).animate({ scrollTop: 0 }, 1000, function() {
                scrollingUp = 0;    
            });
        }
    }
});


$('#scroller').bind('mouseenter', function() {
    dontScroll = 1;
});

$('#scroller').bind('mouseleave', function() {
    dontScroll = 0;
});

​ 在 fiddle 中，当黄色方 block 可见时尝试将滚动条 div 悬停。您将看到它滚动到顶部。

一些注意事项:

• 您会注意到我使用了 mouseenter 和 mouseleave，而不是悬停和 mouseout。这是我能找到的确保 div 中的所有子元素不会产生不利影响的最佳方法。
• 一个潜在的问题是，我已经为滚动到顶部的函数绑定(bind)了滚动事件。我认为当用户手动滚动项目时，这可能会导致一些额外的问题，而我的 jQuery 试图针对用户滚动。
• 我做了一些关于终止 setInterval 的实验，但我发现这不是很有帮助，因为触发的函数不是问题区域。

我的总体目标是当用户悬停或手动滚动列表时锁定所有自动滚动。这是90%。如果他们碰巧滚动到底部，那么在他们将鼠标移到其他地方之前不会发生任何事情 - 这就是问题所在。

Answer 1

让事情变得更简单;) 问题是您首先评估 dontScroll 是否为零，然后启动计时器。 当计时器结束时，它不再评估 dontScroll STILL 是否为零。 只需将其拖入您的scrollIt 函数即可:

var scrollingUp = 0;
var dontScroll = 0;

window.setInterval(scrollit, 2000);

function scrollit() {
    if(dontScroll == 0){
        if ($('#scroller').scrollTop() + $('#scroller').innerHeight() >= $('#scroller')[0].scrollHeight) {
                scrollingUp = 1;     
                $('#scroller').animate({ scrollTop: 0 }, 1000, function() {
                    scrollingUp = 0;    
                });
        } else if(scrollingUp == 0) {
            $('#scroller').animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow');
        }
    }
}

$('#scroller').bind('mouseenter', function() {
    dontScroll = 1;
});

$('#scroller').bind('mouseleave', function() {
    dontScroll = 0;
});