jQuery在MouseHover上自动滚动暂停

Question

我需要帮助处理这个自动滚动。请帮助我暂停滚动，当鼠标悬停在它上面。谢谢。

​

/*scroll view*/
$('.scroll').wrap('<div class="scroll-group"></div>');
$('.scroll').css({
  'overflow': 'hidden',
  height: 'auto'
});
$('.scroll-group').append($('.scroll').clone());
$('.scroll-group').wrap('<div class="scroll-wrap"></div>');
$('.scroll-wrap').css({
  'overflow': 'hidden'
});

/*animate*/
var targetY = $('.scroll').eq(0).outerHeight();

var scroll = function(resetY) {

  //animate 기본 동작 변형 "swing" -> "linear"
  $('.scroll-group').animate({
    top: targetY * -1 + 'px'
  }, 6000, "linear", function() {
    $('.scroll-group').css({
      top: 0
    });
    scroll();
  });
}

scroll();

.scroll-wrap,
.scroll {
  width: 100px;
  height: 102px;
  overflow-y: scroll;
  margin: 0;
  position: relative
}

.scroll-group {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="scroll">content-1<br />content-2<br />content-3<br />content-4<br />content-5<br />content-6<br />content-7<br />content-8<br />content-9<br />content-10<br /></p>

​

Answer 1

请使用这个小提琴。

我将hover和mouseleave函数分别添加到pause和resume中。

​

/*scroll view*/
$('.scroll').wrap('<div class="scroll-group"></div>');
$('.scroll').css({'overflow':'hidden',height:'auto'});
$('.scroll-group').append($('.scroll').clone());
$('.scroll-group').wrap('<div class="scroll-wrap"></div>');
$('.scroll-wrap').css({'overflow':'hidden'});

/*animate*/
var targetY = $('.scroll').eq(0).outerHeight();

var scroll = function(resetY){
  
 //animate 기본 동작 변형 "swing" -> "linear"
     $('.scroll-group').animate({top:targetY*-1+'px'},6000,"linear", function(){
          $('.scroll-group').css({top:0});
          scroll();
     });
     
     $('.scroll-group').hover(function() { //mouseenter
        $('.scroll-group').stop(true, false);
    });
    $(".scroll-group").mouseleave(function(){
        scroll();
    });
}

 scroll();

.scroll-wrap,.scroll {width:100px; height:102px;overflow-y:scroll; margin:0 ; position:relative }
.scroll-group {position:absolute;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="scroll">content-1<br />content-2<br />content-3<br />content-4<br />content-5<br />content-6<br />content-7<br />content-8<br />content-9<br />content-10<br /></p>

​