javascript - Scroll in 100% steps inside div -

i have div contains several children 100% height. on scrolling want go down or height of 1 child, 100%. unfortunately can't figure out how prevent scrolling multiple steps @ time. tried event.preventdefault() , using timeouts, none worked yet.

check out fiddle see i've got far - , issue exactly.

$container = $('#container'); var doscroll = true; var top = 0;  $container.on("scroll", function(event){     event.preventdefault();     if (doscroll) {         doscroll = false;         top += $container.height();         console.log("scroll event fired");         $container.animate({scrolltop: top}, '700', 'swing', function() {              doscroll = true;         });     }  }); 

#container {   height: 500px;   width: 300px;   overflow-y: auto;   overflow-x: hidden; } .child {   height: 100%;   width: 100%; } .red {   background-color: red; } .blue {   background-color: blue; } 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="container">   <div class="child red">child 1</div>   <div class="child blue">child 2</div>   <div class="child red">child 3</div>   <div class="child blue">child 4</div>   <div class="child red">child 5</div> </div> 

actually there 3 issues in code, creates confusion:

1. the scroll event cannot cancelled.
2. $.animate scrolltop trigger scroll event right after complete function has run.
3. all animations queued executed, not matter value doscroll has.

the biggest problem here additional scroll event triggered animation. overcome this, have manage event handling, e.g. skipping on event triggered animation.

for example, see working demo, clears animation queue after each run.