javascript - 如何使用 jquery 停止 $(window).scroll 事件？

Question

我试图将滚动卡住在一个 div 位置，直到用户单击，将鼠标悬停在另一个 div 上。用户操作后，滚动应该被释放并正常工作!但这不起作用!用户悬停并单击此 div 后如何使滚动正常工作？以下是完整代码供引用:https://jsfiddle.net/tqwr3hrp/ (在 Chrome 上测试)!

<div class="stopscroll">click/mouseover here to stop</div> 
<div class="likebox"></div>

$(window).scroll(function(e) {
$('html, body').animate({ scrollTop: $('.likebox').offset().top - 100 }, 1000);
}); 

$('.stopscroll').on('tap click mouseover', function(e) {

$(window).off('scroll');

//another attempt
$('html, body').off('scroll');

//and another attempt
$('html, body').stop().animate();

});

Answer 1

此代码使您的页面实际上自动滚动:

function start_scrolling() {
  $('body').animate({
    scrollTop: $('body').height() - $(window).height()
  }, 10000, 'linear');
}

start_scrolling();

如果您将鼠标悬停在 div 上，此代码将停止滚动；如果将鼠标悬停在 div 上，则将再次开始滚动。我建议添加一个复选框，而不是对 click 执行相同的操作，我在本例中就是这样做的。如果选中该复选框，则像往常一样滚动，如果没有，则让用户自己滚动。

$('.stopscroll').mouseover(function() {
  $('body').stop();
}).mouseout(function() {
  if($('#autoscroll').is(':checked')) {
    start_scrolling();
  }
});

最后一个代码是一个额外的好处，可以让用户立即控制:如果用户滚动，自动滚动将被停用。如果他希望再次启用自动滚动，可以使用该复选框。

$('body').on('scroll wheel DOMMouseScroll touchmove', function() {
  $('body').stop();
  $('#autoscroll').prop('checked', false);
});

JSFiddle