Javascript jQuery"；捕捉到；影响

我有一个具体的效果，我想为我的网站建设。正如您在中所看到的，我希望屏幕在用户滚动后“捕捉”到下一部分，但仅在触发滚动事件后（而不是在瞬间）才执行。我不想使用这样的插件是因为我
1：想要更小的代码和
2.希望该网站在手机上浏览时具有更多的“即时快照”效果（尝试缩小上述网站的浏览器大小）。我知道理论上我可以尝试组合两个插件，比如panelsnap和scrollify，并在浏览器达到一定宽度时适当地激活它们，但我不知道我是否想这样做…：（

所有这些都表明，代码如下：

var scrollTimeout = null;
var currentElem = 0;
var options = {
    scrollSpeed: 1100,
    selector: 'div.panels',
    scrollDelay: 500,
};
$(document).ready(function() {
    var $snapElems = $(options.selector);
    console.log($($snapElems[currentElem]).offset().top);
    function snap() {
        if ($('html, body').scrollTop() >= $($snapElems[currentElem]).offset().top) {
            if (currentElem < $snapElems.length-1) {
                currentElem++;
            }
        }else{
            if (currentElem > 0) {
                currentElem = currentElem - 1;
            }
        }
        $('html, body').animate({
            scrollTop: $($snapElems[currentElem]).offset().top
        }, options.scrollSpeed);
    }
    $(window).scroll(function() {
        if ($(window).innerWidth() > 766) {
            if (scrollTimeout) {clearTimeout(scrollTimeout);}
            scrollTimeout = setTimeout(function(){snap()}, options.scrollDelay);
        }else{
            //I'll deal with this later
        }
    });
});

var scrollTimeout=null；
var currentElem=0；
变量选项={
滚动速度：1100，
选择器：'div.panels'，
延迟时间：500，
};
$（文档）.ready（函数（）{
var$snapElems=$（options.selector）；
log（$（$snapElems[currentElem]）.offset（）.top）；
函数snap（）{
if（$（'html，body'）.scrollTop（）>=$（$snapElems[currentElem]）.offset（）.top）{
如果（currentElem<$snapElems.length-1）{
currentElem++；
}
}否则{
如果（currentElem>0）{
currentElem=currentElem-1；
}
}
$（'html，body'）。设置动画({
scrollTop:$（$snapElems[currentElem]）.offset（）.top
}，选项。滚动速度）；
}
$（窗口）。滚动（函数（）{
如果（$（窗口）.innerWidth（）>766）{
如果（滚动超时）{clearTimeout（滚动超时）；}
scrollTimeout=setTimeout（函数（）{snap（）}，options.scrollDelay）；
}否则{
//我以后再处理
}
});
});

---

我的问题是，每次调用

snap

函数时，它都会触发滚动事件，从而使窗口进入循环，窗口不会停止在第一个元素和第二个元素之间滚动。下面是一个糟糕的、功能失调的站点：感谢您的帮助。

您考虑过使用著名的fullPage.js库吗？Chec请看这个例子。可以通过选项

fitToSectionDelay

配置快照超时。 不用担心大小…它是7Kb的压缩文件

我知道理论上我可以尝试组合两个插件，比如panelsnap和scrollify，当浏览器达到一定宽度时，适当地激活它们，但我不知道我是否想这样做

---

fullPage.js还提供了

responsiveWidth

和

responsiveHeight

选项，可在某些维度下将其关闭。

您可以使用布尔值记录

snap

中的滚动动画何时进行，并防止

$（窗口）。scroll（）

事件处理程序执行任何操作

下面是一个工作示例：

var scrollTimeout = null;
var currentElem = 0;
var options = {
    scrollSpeed: 1100,
    selector: 'div.panels',
    scrollDelay: 500,
};
$(document).ready(function() {
    var scrollInProgress = false;
    var $snapElems = $(options.selector);
    console.log($($snapElems[currentElem]).offset().top);
    function snap() {
        if ($('html, body').scrollTop() >= $($snapElems[currentElem]).offset().top) {
            if (currentElem < $snapElems.length-1) {
                currentElem++;
            }
        }else{
            if (currentElem > 0) {
                currentElem = currentElem - 1;
            }
        }

        scrollInProgress = true;
        $('html, body').animate({
            scrollTop: $($snapElems[currentElem]).offset().top
        }, options.scrollSpeed, 'swing', function() {
            // this function is invoked when the scroll animate is complete
            scrollInProgress = false;

        });
    }
    $(window).scroll(function() {
        if (scrollInProgress == false) {
            if ($(window).innerWidth() > 766) {
                if (scrollTimeout) {clearTimeout(scrollTimeout);}
                scrollTimeout = setTimeout(function(){snap()}, options.scrollDelay);
            }else{
                //I'll deal with this later
            }
        }
    });
});

var scrollTimeout=null；
var currentElem=0；
变量选项={
滚动速度：1100，
选择器：'div.panels'，
延迟时间：500，
};
$（文档）.ready（函数（）{
var scrollInProgress=false；
var$snapElems=$（options.selector）；
log（$（$snapElems[currentElem]）.offset（）.top）；
函数snap（）{
if（$（'html，body'）.scrollTop（）>=$（$snapElems[currentElem]）.offset（）.top）{
如果（currentElem<$snapElems.length-1）{
currentElem++；
}
}否则{
如果（currentElem>0）{
currentElem=currentElem-1；
}
}
scrollInProgress=true；
$（'html，body'）。设置动画({
scrollTop:$（$snapElems[currentElem]）.offset（）.top
}，options.scrollSpeed，'swing'，function（）{
//当滚动动画完成时调用此函数
scrollInProgress=false；
});
}
$（窗口）。滚动（函数（）{
如果（scrollInProgress==false）{
如果（$（窗口）.innerWidth（）>766）{
如果（滚动超时）{clearTimeout（滚动超时）；}
scrollTimeout=setTimeout（函数（）{snap（）}，options.scrollDelay）；
}否则{
//我以后再处理
}
}
});
});

默认情况下，变量

scrollInProgress

设置为

false

。当滚动

animate

启动时，变量

scrollInProgress

设置为

true

。当

animate

完成时，

scrollInProgress

设置为false。在

$（窗口）顶部有一个简单的if语句。scroll（）

事件处理程序阻止处理程序在执行

动画

滚动时执行任何操作