javascript - if 语句在条件失败时运行并与窗口滚动事件绑定(bind)

Question

信息

我正在尝试构建一个单页网站，当用户滚动一点时，它会自动捕捉到下一部分，我的逻辑是

1. 获取所有滚动部分的顶部，
2. 找到最近的路段，
3. 取决于滚动方向

请在此处查看完整代码 http://jsfiddle.net/e3fed8sw/ 我注释掉了 goTo() 函数，因为它破坏了网站。请在尝试之前取消注释。

问题:

为什么 goTo() 在方向测试失败后仍然运行？

我认为这可能就是问题所在。

function checkScrollDirection(){
    var lastScrollTop = 0, delta = 0;
    var st = $(this).scrollTop();

if(Math.abs(lastScrollTop - st) <= delta)
    return false;

if (st > lastScrollTop){
// downscroll code
    return "down";
} else {
// upscroll code
    return "up";
}
    lastScrollTop = st;
}

DOM 就绪

$(document).ready(
    function() {

        var onePageLoacations = []; 

        $('.onePage').each(
            function(index, el) {
                onePage($(el));
                var onePageLoacation = getOnePageLocation($(el));
                    onePageLoacations.push(onePageLoacation);
            }
        );

        $(window).on('scroll', function(event) {

            var currentPos = $(window).scrollTop(),
                direction = checkScrollDirection();
                onePageCount = onePageLoacations.length, 
                topPosArray = [];
                i = 0;                      

                console.log('is traveling '+direction);

            for(i; i<onePageCount; i++) {
                topPosArray.push(onePageLoacations[i][0]);
            }

            var closestCord = closest(topPosArray,currentPos), 
                pageNumber = topPosArray.indexOf(closestCord),  // 0 base
                currentPage = $('.onePage').eq(pageNumber),
                nextPage = currentPage.next('.onePage');

                if(direction==="down") {
                    var currentThreshold = closestCord + 50;
                    if(currentPos > currentThreshold) {
                        goTo(currentPage, nextPage);
                        console.log('goto active');
                    } else {
                        console.log('condition not met');
                    }
                } else {

                }
        });

    }
);

Answer 1

您的 checkScrollDirection 函数存在两个问题:

1. 它每次都会重新初始化您的 lastScrollTop，因此它不会记住最后一个值
2. 您永远不会将当前的 st 值分配给 lastScrollTop，因为分配是在 return 语句之后完成的。

修复它:

• 将 lastScrollTop 变量设置为全局变量(在函数体外部声明)
• 不要在每次调用函数时为其分配新值
• 正确为其分配当前的st值

代码:

var lastScrollTop = 0;
function checkScrollDirection(){
    var delta = 0;
    var st = $(this).scrollTop();

    if(Math.abs(lastScrollTop - st) <= delta)
        return false;

    if (st > lastScrollTop){
        lastScrollTop = st;
        return "down";
    } else {
        lastScrollTop = st;
        return "up";
    }        
}