javascript - jquery整页滚动，无需插件

Question

https://jsfiddle.net/dewit/xnq0pzx0/1/

var currentLocation = 'firstPage';

$(document).scroll(function(e){
    var scrolled = $(window).scrollTop(),
        secondHeight = $('#secondPage').offset().top,
        thirdHeight = $('#thirdPage').offset().top;

    if (scrolled > 1 && currentLocation == 'firstPage') {
        currentLocation = 'secondPage';
        $('body').animate({scrollTop:$('#secondPage').offset().top}, 500);
    } else if (scrolled > secondHeight + 1 && currentLocation == 'secondPage') {
        currentLocation = 'thirdPage';
        $('body').animate({scrollTop:$('#thirdPage').offset().top}, 500);
    } else if (scrolled < thirdHeight - 1 && currentLocation == 'thirdPage') {
        currentLocation = 'secondPage'
        $('body').animate({scrollTop:$('#secondPage').offset().top}, 500);
    } else if (scrolled < secondHeight - 1 && currentLocation == 'secondPage') {
        currentLocation = 'firstPage';
        $('body').animate({scrollTop:$('#firstPage').offset().top}, 500);
    }
})

我想制作一个不带插件的整页 slider 。

我希望它能够检测当前页面和滚动方向并移动下一页或上一页。

问题在于，当幻灯片发生变化时，它会检测到新位置并滚动。

结果，它上下弹跳。

所以，我想在滑动移动时卡住这个功能。

但是，我不知道如何处理这个问题。

Answer 1

问题在于，当用户滚动时以及动画也会触发事件监听器。据我所知，您只想在用户滚动时检查所有 if/else 语句。类似以下内容应该有所帮助:

var currentLocation = 'firstPage';
// No need to set these inside the event listener since they are always the same.
var firstHeight = $('#firstPage').offset().top,
    secondHeight = $('#secondPage').offset().top,
    thirdHeight = $('#thirdPage').offset().top;

// Helper so we can check if the scroll is triggered by user or by animation.
var autoScrolling = false;

$(document).scroll(function(e){
    var scrolled = $(window).scrollTop();
    
    // Only check if the user scrolled
    if (!autoScrolling) {
    	if (scrolled > 1 && currentLocation == 'firstPage') {
            scrollPage(secondHeight, 'secondPage');
        } else if (scrolled > secondHeight + 1 && currentLocation == 'secondPage') {
            scrollPage(thirdHeight, 'thirdPage');
        } else if (scrolled < thirdHeight - 1 && currentLocation == 'thirdPage') {
            scrollPage(secondHeight, 'secondPage');
        } else if (scrolled < secondHeight - 1 && currentLocation == 'secondPage') {
            scrollPage(firstHeight, 'firstPage');
        }
    }
    
    // Since they all have the same animation, you can avoid repetition
    function scrollPage(nextHeight, page) {
      currentLocation = page;

      // At this point, the page will start scrolling by the animation
      // So we switch this var so the listener does not trigger all the if/else
      autoScrolling = true;
      $('body,html').animate({scrollTop:nextHeight}, 500, function () {
          // Once the animation is over, we can reset the helper.
          // Now it is back to detecting user scroll.
          autoScrolling = false;
      });
    }

	$('h1').html(scrolled);
	$('h1').append("/" + secondHeight);
	$('h1').append("/" + thirdHeight);
})

*{
	padding: 0;
	margin: 0;
}
html,body{
    width: 100%;
    height:100%;
}
.page{
	width: 100%;
	line-height: 100vh;
	text-align: center;
}
header{
	position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
	<h1></h1>
</header>
<article>
	<div class="page" id="firstPage">
		<h2>first page</h2>
	</div>
	<div class="page" id="secondPage">
		<h2>second page</h2>
	</div>
	<div class="page" id="thirdPage">
		<h2>third page</h2>
	</div>
</article>