Crossbrowser solution for disable/enable scroll

Question

Long time ago I found somewhere (on stackoverflow I think) code to scroll one window height per scroll. I tried many libraries but that script works just like I want. But it's jumpy when scrolling during animation. So I disable scroll during animation but it works only in Firefox.

I made a 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; };
});

there is an [stackoverflow answer](http://stackoverflow.com/a/4770179/4146854) that working crossbrowser — amir hosein ahmadi, Jan 29 '16 at 11:08
CSS's scroll snapping my be interesting to you: http://blog.gospodarets.com/css-scroll-snap/ (They're not yet available in Chrome and are fairly new in Safari and Firefox) — evelynhathaway, Jan 29 '16 at 11:20

jolmos · Accepted Answer · 2016-01-29T11:47:37.863

I don`t understand this:

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

this will be true until you pass the six slide...

UPDATED: If you want to stop triggering the animation while it is running you can just delete the stop(). Then if you don't want to enqueue animations(and then get strange behaviors), you can just call clearQueue() when the 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 currently 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>

Thank you so much but now when I use scrollbar that scroll doesn't work until page refresh. — joryl, Jan 29 '16 at 11:26
well, yes... it only allow you to scroll when you are in the right position. But, you have many other options to make it works, check my update. — jolmos, Jan 29 '16 at 11:42

Crossbrowser solution for disable/enable scroll

1 Answers1