1

这是上一个问题的后续帖子：jQuery - 每 x 秒向下滚动一次，然后滚动到顶部

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

我有一个 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 而不是 hover 和 mouseout。这是我能找到的确保 div 中的所有子元素不会产生不利影响的最佳方法。
  • 一个潜在的问题区域是我已经绑定到滚动到顶部的函数的滚动事件。我认为当用户手动滚动项目时，这可能会导致一些额外的问题，而我的 jQuery 试图滚动用户。
  • 我做了一些关于杀死 setInterval 的实验，但我没有发现这很有帮助，因为触发的函数不是问题区域。

我的总体目标是在用户悬停或手动滚动列表时锁定所有自动滚动。这是那里的90％。如果他们碰巧滚动到底部，那么在他们将鼠标移动到别处之前什么都不会发生——这就是问题所在。

4

1 回答 1

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;
});
于 2012-10-28T17:02:25.683 回答