javascript - Crossbrowser solution for disable/enable scroll -

long time ago found somewhere (on stackoverflow think) code scroll 1 window height per scroll. tried many libraries script works want. it's jumpy when scrolling during animation. disable scroll during animation works in firefox.

i made fiddle: https://jsfiddle.net/msoys5gc/1/

if( $(window).scrolltop() < $(window).height() * 6 ) {     window.onwheel = function(){ return false; }; } $('html,body').stop().animate({   scrolltop: divs.eq(div).offset().top   }, 600, function() {     window.onwheel = function(){ return true; }; }); 

i don`t understand this:

if( $(window).scrolltop() < $(window).height() * 6 ) 

this true until pass 6 slide...

updated: if want stop triggering animation while running can delete stop(). if don't want enqueue animations(and strange behaviors), can call clearqueue() when animation has finished.

var divs = $('.section');   var dir = 'up'; // wheel scroll direction  var div = 0; // current div    $(document.body).on('dommousescroll mousewheel', function (e) {  	if (e.originalevent.detail > 0 || e.originalevent.wheeldelta < 0) {    	dir = 'down';    }     else {    	dir = 'up';    }        // find visible div :    div = -1;    divs.each(function(i){    	if (div<0 && ($(this).offset().top >= $(window).scrolltop())) {    		div = i;    	}  	});        if (dir == 'up' && div > 0) {    	div--;    }    if (dir == 'down' && div < divs.length) {    	div++;    }           $('html,body').animate({  	  scrolltop: divs.eq(div).offset().top    }, 1600, function() {  		$('html,body').clearqueue();  	});                return false;  });    $(window).resize(function () {  	$('html,body').scrolltop(divs.eq(div).offset().top);  });

.section {    height: 100vh;  }  body{    margin: 0px !important;    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="section" style="background: yellow;"></div>  <div class="section" style="background: green;"></div>  <div class="section" style="background: blue;"></div>  <div class="section" style="background: red;"></div>  <div class="section" style="background: violet;"></div>  <div class="section" style="background: orange;"></div>  <div class="section" style="background: black;"></div>