Question

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

我做了一个小提琴：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>

用于禁用/启用滚动的Crossbrowser解决方案

1 个答案: