javascript - $('body, html').is(':animated')) doesn't seem to be working -
i have 4 divs heights set window height. want on each scroll down scroll next one, after first scroll down 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 animated
logged 6 times reason, expected 3.
you can use variable achieve, 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 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 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>
Comments
Post a Comment