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动画正在运行时，它会记录更多的滚动，然后继续跳跃。我已经尝试添加布尔滚动，甚至在将其设置为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>

任何人对如何解决此问题都有任何想法？我似乎无法找到一种方法来让它只注册一次滚动，然后很好地重置自己。

我有一个小提琴：http://jsfiddle.net/a1cpx2cf/

Answer 1

我建议你使用像fullPage.js这样经过测试的插件，而不是试图重新发明轮子。

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

使用经过测试的脚本总是会让事情变得更轻松，并且可以为您节省很多麻烦。

使用$（window）.scroll函数跳转到页面上的div

1 个答案: