Pause Div à défilement automatique

J’ai un div que je veux faire défiler de haut en bas au chargement de la page et une pause de défilement une fois que l’utilisateur survole la div. J’ai réussi à faire défiler la div de haut en bas, mais je ne parviens pas à la mettre en pause.

Aucune suggestion?

 //CONTENT 
  $("#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);

Je suggère que vous n’utilisiez pas animer pour la fonction de défilement. Au lieu de cela, augmentez simplement la position de défilement toutes les 100 ms (ou autre chose).

Vous devez également append des indicateurs pour déterminer le sens de défilement et l’état de pause:

 // 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);

Ensuite, vous pouvez modifier l'indicateur isPaused lorsque vous êtes sur les événements mouseenter et mouseexit, ou utiliser l'événement survol JQuery:

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

Voici un exemple de travail

Vous devriez pouvoir arrêter / mettre en pause votre animation avec la fonction jQuery stop() : https://api.jquery.com/stop/