Question

您好我有自动滚动页面的工作代码。我需要做一些修改。当用户在页面上移动鼠标并且没有鼠标移动时需要暂停自动滚动，然后自动滚动将恢复。

      <script>
    $("html, body").animate({ scrollTop: $(document).height() }, 400000);
        setTimeout(function() {
           $('html, body').animate({scrollTop:0}, 400000); 
        },400000);
        setInterval(function(){
             //  it will take 40 secound in total from the top of the page to the bottom
        $("html, body").animate({ scrollTop: $(document).height() }, 400000);
        setTimeout(function() {
           $('html, body').animate({scrollTop:0}, 400000); 
        },400000);

        },8000);
    </script>

Answer 1

希望这就是你要找的东西

  var x = 10,
    y = true,
    z = 1,
    maxscroll = 40,
    mixscroll = 10;

setInterval(function() {
    $('html, body').mousemove(function() {
        z = 0;
    });
    if (z === 0) {
        setTimeout(function() {
            z = x;
        }, 1000);
    } else {
        z = x;
        if (y) {
            $('html, body').animate({ scrollTop: ($(window).scrollTop() + z) + 'px' }, 300);
            x++;
        } else {
            $('html, body').animate({ scrollTop: ($(window).scrollTop() + -(z)) + 'px' }, 300);
            x--;
        }
    }

    if (maxscroll < x && y) {
        y = false;
    } else if (x < mixscroll) {
        y = true;
    }
}, 500);

https://jsfiddle.net/donS/9xdz86yu/

Answer 2

你可以在jQuery中使用.stop()函数，如..

$("html, body").mouseover(function(){ 
           $(this).stop();
});

试试 FIDDLE

当用户将鼠标移动到屏幕/图形上时，自动滚动将暂停。如果鼠标移动停止，自动滚动将再次恢复

2 个答案: