Javascript jquery不带插件的全页滚动

var currentLocation='firstPage'；
$（文档）。滚动（功能（e）{
var scrolled=$（窗口）.scrollTop（），
secondHeight=$（“#secondPage”）.offset（）.top，
thirdHeight=$（'#thirdPage'）.offset（）.top；
如果（滚动>1&¤tLocation=='firstPage'）{
currentLocation='secondPage'；
$（'body'）.animate（{scrollTop:$（'secondPage'）.offset（）.top}，500）；
}否则如果（滚动>第二高度+1&¤tLocation==“第二页”）{
currentLocation=‘第三页’；
$（'body'）.animate（{scrollTop:$（'thirdPage'）.offset（）.top}，500）；
}else if（滚动

我想做一个没有插件的完整页面滑块

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

问题是，当幻灯片更改时，它会检测到新位置并滚动

因此，它会上下跳动

所以，我想在幻灯片移动时冻结这个函数

---

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

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

var currentLocation='firstPage'；
//不需要在事件侦听器中设置这些，因为它们总是相同的。
var firstHeight=$（'#firstPage'）.offset（）.top，
secondHeight=$（“#secondPage”）.offset（）.top，
thirdHeight=$（'#thirdPage'）.offset（）.top；
//我们可以检查滚动是由用户还是由动画触发的。
var autoScrolling=false；
$（文档）。滚动（功能（e）{
var scrolled=$（窗口）.scrollTop（）；
//仅检查用户是否已滚动
如果（！自动滚动）{
如果（滚动>1&¤tLocation=='firstPage'）{
滚动页面（第二高度，“第二页”）；
}否则如果（滚动>第二高度+1&¤tLocation==“第二页”）{
滚动页（第三页，第三页）；
}else if（滚动

*{
填充：0；
保证金：0；
}
html，正文{
宽度：100%；
身高：100%；
}
.第页{
宽度：100%；
线路高度：100vh；
文本对齐：居中；
}
标题{
位置：固定；
}

首页
第二页
第三页

是的，最初的版本在firefox中也不起作用。请参见上面的“编辑”以修复它。基本上，动画中滚动内容的选择器必须是

$（'body，html'）

，而不仅仅是

body

，才能在firefox中工作。请参见下面的评论1 Gonza的答案，跨浏览器功能需要

$（'html，body'）

选择器来制作动画。然后，您可以添加这一行作为事件侦听器中的第一行，以便快速修复：

if（$（'html'）.is（'：animated'）return。
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);
    }
})