Question

我对我建立的网站有特定的效果。正如您在this website中看到的那样，我希望屏幕显示为＆＃34;对齐＆＃34;用户滚动后的下一部分，但只有之后（不是瞬间）滚动事件被触发。我不想使用像panelSnap这样的插件的原因是因为我 1：想要更小的代码和
2.想要在移动设备上查看该网站，可以获得更多的即时快照＆＃34;效果（尝试减少上面提到的网站中的浏览器大小）。我知道我理论上可以尝试组合两个插件，如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
        }
    });
});

我的问题是，每次调用snap函数时，它都会触发滚动事件，该事件会将其抛入循环，窗口不会在第一个和第二个元素之间滚动。这是一个可怜的，功能失调的网站：https://tcfchurch.herokuapp.com/index.html感谢您的帮助。

Answer 1

您是否考虑过使用众所周知的fullPage.js库？看看这个normal scroll示例。快照超时可通过选项fitToSectionDelay进行配置。没有什么可担心的大小...它是7Kb Gzipped！

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

fullPage.js还提供了responsiveWidth和responsiveHeight选项，可以在特定维度下将其关闭。

Answer 2

您可以使用布尔值来记录snap中的滚动动画何时进行，并阻止您的$(window).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
            }
        }
    });
});

默认情况下，变量scrollInProgress设置为false。当滚动true开始时，它会设置为animate。 animate完成后，scrollInProgress将重新设置为false。 $(window).scroll()事件处理程序顶部的简单if语句会阻止处理程序在animate滚动过程中执行任何操作。

jQuery＆＃34; Snap To＆＃34;影响

2 个答案: