CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Patrick T
Patrick T

Reputation: 11

How can I stop $(window).scroll event with jquery?

I'm trying to freeze scroll at a div position till user click, hover another div. After user action, scroll should be released and work normally! But it doesn't work! How can I make scroll work normally after user hover, click on this div? Here is the full code for reference: https://jsfiddle.net/tqwr3hrp/ (tested on 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();

});

Upvotes: 0

Views: 1743

Answers (1)

WcPc
WcPc

Reputation: 457

This code makes that your page actually scrolls automatically:

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

start_scrolling();

This code lets the scrolling stop if you hover your div and lets it start again if you unhover it. Instead of doing the same with click I recommend adding a checkbox, which I did in this example. If the checkbox is checked, scroll as usual, if not, let the user scroll himself.

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

This last code is a bonus and lets the user take control immediatedly: If the user scrolls, the autoscroll is deactivated. If he wishes to enable the autoscroll again, he can use the checkbox.

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

JSFiddle

Upvotes: 1

Related Questions