Как приостанавливать автоматическую прокрутку блока div при наведении на него мышкой?

Question

Сделал div с автоматической прокруткой. Теперь встала задача, как эту прокрутку приостановить, если курсор наведен на блок, а если курсор убран, то продолжить с того же места.

Помогите реализовать задуманное.

$(document).ready(function(){

    $(document).ready(function() {
        var div = $('#vipLentaBox');
        div.animate({ scrollTop: div.prop("scrollHeight")}, 30000); // 1000 мс для создания эффекта плавного перемещения к содержимому div
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div style="overflow-y: scroll; max-height: 400px;" id="vipLentaBox">

    <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
    <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
    <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
    <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
    <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
    <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
    <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
    <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
    <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
    <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
    <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
    <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
    <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
    <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
    <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
    <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
    <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
    <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>

</div>

Answer 1

$(document).ready(function() {
    let div = $('#vipLentaBox');
  
    div.on('mouseenter', () => {
        disableBlockScroll(div);
    });

    div.on('mouseleave', () => {
        enableBlockScroll(div);    
    });
    
    enableBlockScroll(div);
});


function enableBlockScroll(div) {
    div.animate({
        scrollTop: div.prop("scrollHeight")
    }, 3000);
}


function disableBlockScroll(div) {
    div.stop();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div style="overflow-y: scroll; max-height: 400px;" id="vipLentaBox">

  <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
  <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
  <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
  <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
  <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
  <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
  <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
  <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
  <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
  <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
  <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
  <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
  <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
  <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
  <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
  <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
  <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
  <div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>

</div>

БЛОГ НА HUSL

Как приостанавливать автоматическую прокрутку блока div при наведении на него мышкой?

Ответы (1 шт):