javascript - 禁用/启用滚动的跨浏览器解决方案

Question

很久以前，我在某个地方(我认为是在 stackoverflow 上)找到了每次滚动滚动一个窗口高度的代码。我尝试了很多库，但那个脚本就像我想要的那样工作。但是在动画期间滚动时它会跳动。所以我在动画期间禁用了滚动，但它只在 Firefox 中有效。

我做了一个 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; };
});

Answer 1

我不明白:

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

这将是正确的，直到您通过六张幻灯片...

更新:如果您想在动画运行时停止触发动画，您只需删除 stop() .然后如果你不想排队动画(然后得到奇怪的行为)，你可以调用 clearQueue()当动画结束时。

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>