Question

我有一个div，我想在页面加载时上下滚动，并在用户将鼠标悬停在div上后暂停滚动。我设法让div上下滚动但是我不能让它暂停。

任何建议？

 <div id="box" class="timeline container" style="overflow:scroll; width:100%; height:300px;">
    //CONTENT
 </div>         

 <script>

    $("#box").animate({ scrollTop: $(document).height() }, 4000);
    setTimeout(function() {
     $('#box').animate({scrollTop:0}, 4000); 
    },4000);
    setInterval(function(){

    $("#box").animate({ scrollTop: $(document).height() }, 4000);
    setTimeout(function() {
    $('#box').animate({scrollTop:0}, 4000); 
    },4000);

    },8000);


 </script>

Answer 1

我建议你不要使用animate来滚动功能。相反，只需每100毫秒（或其他）增加滚动位置。

您还需要添加标志以确定滚动方向和暂停状态：

// global level variables.
var isPaused = false;
var direction = 1;
var element = $('#box');

// interval for scroll.
setInterval(function () {
    if(!isPaused){
        var pos = element.scrollTop();
        var offset = 1 * direction;
        element.scrollTop(pos + offset);

        // Change the scroll direction when hit an end.
        if ((element[0].scrollHeight - element.scrollTop() == element.outerHeight()) || (element.scrollTop() <= 0)) {
            direction *= -1;
        }
    }

}, 100);

然后，您可以在使用mouseenter和mouseexit事件时更改isPaused标志，或使用JQuery hover事件：

$('#box').hover(
  function() {
    isPaused = true;
  }, function() {
    isPaused = false;
  }
);

Here is a working example

Answer 2

您应该能够使用jQuery函数stop()停止/暂停动画：https://api.jquery.com/stop/

暂停自动滚动Div

2 个答案: