Jquery 滚动显示div

我正试图创建一个类似的单页滚动效果类似于此，但不必使用插件

我的代码是检查可用的div（sections）并在滚动时增加1，然后淡入、重定向到它（window.location=#s1）或设置滚动动画。问题是滚动是敏感的和连续的，在这个例子中，鼠标滚动一次，从1到5。设置滚动到div的动画时，它还会触发事件侦听器

是否可以在第一次滚动后暂停滚动事件侦听器，显示div，然后取消暂停侦听器

<div id="sections">
    <div id="s1">section 1</div>    
    <div id="s2">section 2</div>    
    <div id="s3">section 3</div>    
    <div id="s4">section 4</div>    
    <div id="s5">section 5</div>
</div>

#sections div {
    min-height: 1000px;
}

var tempScrollTop= 0; 
var currentSection = 0;
var maxSections = $("#sections div").size() - 1;

$(window).scroll(function() { 
    currentScrollTop = $("body").scrollTop(); 

    if (tempScrollTop > currentScrollTop ) {
    // scroll up
    } else if (tempScrollTop < currentScrollTop) {
    // scroll down

        if (currentSection <= maxSections) { 
            currentSection++;
        }

        $('#sections div').hide();
        $("#s"+currentSection).fadeIn('slow');
    }

    tempScrollTop = currentScrollTop; 
});

第一节
第二节
第三节
第四节
第五节
#分区{
最小高度：1000px；
}
var tempScrollTop=0；
var currentSection=0；
var maxSections=$（“#sections div”）.size（）-1；
$（窗口）。滚动（函数（）{
currentScrollTop=$（“正文”）.scrollTop（）；
如果（tempScrollTop>currentScrollTop）{
//向上滚动
}else if（临时滚动顶部<当前滚动顶部）{
//向下滚动
如果（currentSection考虑到您已将HTML与div设置为
myDiv0
，
myDiv1
…，您可以捕获箭头键事件并滚动到
div
，如下所示

var currCount = 0;
var totalDivs = $('div[id^="myDiv"]').length;
$(document).keydown(function(e) {
switch(e.which) {
    case 37: // left
    break;

    case 38: // up
    $('html, body').animate({
        scrollTop: $("#myDiv" + (--currCount)%totalDivs).offset().top
    }, 1000);
    break;

    case 39: // right
    break;

    case 40: // down
    $('html, body').animate({
        scrollTop: $("#myDiv" + (++currCount)%totalDivs).offset().top
    }, 1000);
    break;

    default: return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)

})
尝试调整
html
以元素的
id
开始，以
0
结束，将
scroll
事件处理程序定义为命名函数，将
.one（）
替换为
.on（），在重新附加
scroll`事件侦听器之前使用
setTimeout（）
创建最小延迟


var-tempScrollTop=0；
var currentScrollTop=0；
var currentSection=0；
var maxSections=$（“#sections div”）.长度；
函数滚动条（）{
var fx=函数（设置部分）{
currentSection=！！设置部分
？--当前节%maxSections
：++currentSection%maxSections；
如果（当前节>-1）{
$（“#节分区”）.hide（）
.filter（“#s”+当前部分）
.fadeIn（“慢”，函数（）{
setTimeout（函数（）{
tempScrollTop=$（this.scrollTop（）；
$（此）.1（“滚动”，滚动条）
})
});
//如果向上滚动到第一个`#s0`
}否则{
currentSection=0；
tempScrollTop=$（this.scrollTop（）；
$（此）.1（“滚动”，滚动条）
}
}
currentScrollTop=$（this.scrollTop（）；
如果（currentScrollTop>tempScrollTop&¤tSection

#节分区{
最小高度：1000px；
}
#s0{
背景：金；
}
#s1{
背景：绿色；
}
#s2{
背景：棕色；
}
#s3{
背景：蓝色；
}
#s4{
背景：红色；
}

第0节
第一节
第二节
第三节
第四节
我希望能够滚动而不是使用箭头键