Question

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

我已经进一步完善了脚本，但是在最后一步遇到了一些麻烦。

我有一个div，它一次自动50px直到它到达底部，此时它会滚动到顶部并重新开始。由于上面的问题和一些补充工作，我完全正常工作。

我需要在div悬停时使所有滚动停止。我已经完成了部分内容（悬停时没有增量滚动）但我无法全面了解。即使在盘旋时，div仍将滚动到顶部。

这是我的jQuery和随之而来的小提琴：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;
});

在小提琴中，尝试在黄色方块可见时悬停滚动条div。你会看到它滚动到顶部。

几点说明：

您会注意到我使用了mouseenter和mouseleave，而不是使用鼠标悬停和鼠标悬停。这是我能找到的最好的方法，以确保div中的所有子元素都没有产生不利影响。
一个潜在的问题区域是我已经为我的函数滚动到顶部的滚动事件绑定了这个事实。我认为当用户手动滚动项目时，这可能会导致一些额外的问题，我的jQuery试图滚动用户。
我做了一些试验杀死setInterval，但我没有发现这非常有用，因为触发的函数不是问题区域。

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

Answer 1

保持简单;）问题是你首先评估wheter 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;
});

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

1 个答案: