如何用jquery停止$(window).scroll事件?

时间:2016-03-10 21:55:49

标签: javascript jquery html ajax

我正试图在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();

});

1 个答案:

答案 0 :(得分:0)

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

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