很久以前,我在stackoverflow上找到了一个代码,可以在每个滚动条上滚动一个窗口高度。我试过很多库,但那个脚本工作得和我想要的一样。但在动画中滚动时会有点不安。所以我在动画中禁用了scroll,但它只在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; };
});

最佳答案

我不明白:

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>

10-08 05:17
查看更多