javascript - 使用$(window).scroll函数跳转到页面上的div

Question

我试图模仿这个网站的功能 https://moto360.motorola.com/ 当您在该页面上向下滚动时，它只会跳转到下一个“屏幕”，如果您向上滚动，它会跳回。

我的 JS 在这里:

var currentDiv = "Home";
var latestScroll = 0;
var scrollable = true;
    $(document).ready(function(){
        $("#HomeLink").addClass("activeNav");
        $(".navLink").click(function(){
            $(".navLink").removeClass("activeNav");
            $(this).addClass("activeNav");
            var divID = $(this).attr("data-linkID");
            scrollTo(divID);
        });
        $(window).scroll(function(){
            console.log(scrollable);
            if (scrollable==true){
                var currentScroll = $(window).scrollTop();
                if (currentScroll > latestScroll){
                    scrollable = false;
                    //downscroll
                    if(currentDiv!="About"){
                        var nextDiv = $("#"+currentDiv).next()[0];
                        var nextDivID = $(nextDiv).attr("id");
                        scrollTo(nextDivID);
                    }
                }else{
                    scrollable = false;
                    //upscroll
                    if(currentDiv!="Home"){
                        var prevDiv = $("#"+currentDiv).prev()[0];
                        var prevDivID = $(prevDiv).attr("id");
                        scrollTo(prevDivID);
                    }
                }
            }
        });
    });

    function scrollTo(divID){
        currentDiv = divID;
        var target = $("#"+divID);
        $('html,body').animate({
             scrollTop: target.offset().top
        }, 500);
        setTimeout(function() {
            // Do something after 2 seconds
            latestScroll = target.offset().top;
            scrollable = true;
        }, 2000);
    }

我的问题是，一旦它开始滚动，它就会跳转到下一个屏幕，但是当 jQuery 动画运行时，它会注册更多的滚动，然后继续跳转。我已经尝试添加 bool 滚动，甚至在将其设置回 true 时添加超时，但它仍然会至少跳转两次。

HTML:

<div id="screens">
    <div class="screen" id="Home">
        <div id="logo">ZEPPA</div>
    </div>
    <div class="screen" id="Video">
        <iframe width="100%" height="100%" src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
    </div>
    <div class="screen" id="Info">INFO</div>
    <div class="screen" id="About">ABOUT US</div>
</div>

有人知道如何解决这个问题吗？我似乎无法找到一种方法让它只注册一次滚动然后很好地重置自己。

我这里有一个 fiddle :http://jsfiddle.net/a1cpx2cf/

Answer 1

我建议您使用经过测试的插件，例如 fullPage.js而不是试图重新发明轮子。

当您开始担心触摸屏计算机、手机、动态滚动(用于 Apple 笔记本电脑)、转换性能、与旧浏览器的后备兼容性、键盘可访问性、每个部分的 URL 更改时，事情会变得更加复杂，有用返回用户或特定链接等的 URL。

使用经过测试的脚本总是会让事情变得更容易，并且会为您省去很多麻烦。