dzimi dzimi - 6 months ago 17
jQuery Question

$('body, html').is(':animated')) doesn't seem to be working

I have 4 divs with heights set to window height. I want on each scroll down to scroll to the next one, however after the first scroll down it just keeps on scrolling, seemingly ignoring

is:animated


<style>

.div {
width: 100%;
}

.red {
background: red;
}

.yellow {
background: yellow;
}

.green {
background: green;
}

.blue {
background: blue;
}

</style>

<div id="id0" data-id="0" class="nbhd red scrolledto"></div>
<div id="id1" data-id="1" class="nbhd yellow"></div>
<div id="id2" data-id="2" class="nbhd green"></div>
<div id="id3" data-id="3" class="nbhd blue"></div>



function setHeights() {
$('.nbhd').css('height', window.innerHeight);
}

function scrollSections() {

if ($('body, html').is(':animated')) {
return;
}

var currentSectionId = $('.nbhd.scrolledto').data('id');

currentSectionId++;

$('.scrolledto').removeClass('scrolledto');

var section = $('#id'+currentSectionId);

section.addClass('scrolledto');

var pos = section.offset().top;

$('body, html').animate({scrollTop: pos}, 1000, function() {
console.log('animated');
});

}

setHeights();



$( window ).on( "scroll", function() {
scrollSections();
});


fiddle: https://jsfiddle.net/2d47k6af/

I also get
animated
logged 6 times for some reason, I expected 3.

Answer

You can to use variable to achieve, what you want:

function setHeights() {
  $('.nbhd').css('height', window.innerHeight);
}


var isAnimated = false; // Initialize variable
function scrollSections() {
  if (isAnimated) return; // Previous animation still in action
  isAnimated = true; // lock it
  var currentSectionId = $('.nbhd.scrolledto').data('id');

  currentSectionId++;
  var section = $('#id'+currentSectionId);
  if (!section.length) {
    currentSectionId = 0;
    section = $('#id0');
  }

  $('.scrolledto').removeClass('scrolledto');

  section.addClass('scrolledto');

  var pos = section.offset().top;

  $('body').animate({scrollTop: pos}, 1000, function() {
      setTimeout(function(){
        isAnimated = false; // unlock it on next eventloop tick
      })
  });
}

setHeights();



$( window ).on( "scroll", function() {
    scrollSections();
});
.div {width: 100%;}
.red {background: red;}
.yellow {background: yellow;}
.green {background: green;}
.blue {background: blue;}
<div id="id0" data-id="0" class="nbhd red scrolledto"></div>
<div id="id1" data-id="1" class="nbhd yellow"></div>
<div id="id2" data-id="2" class="nbhd green"></div>
<div id="id3" data-id="3" class="nbhd blue"></div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>