在javascript中检测Y位置的问题

Question

我正在编写将根据页面的Y位置运行动画的代码。问题是，它似乎没有运行函数中的每个位置。我觉得我的代码做得不对。

var userHasScrolled = false;

    //this runs if the user has scrolled        
    window.onscroll=scroll;


    setInterval(function()
    {
    if (userHasScrolled == false)
    {
        document.getElementById("faux-braid-gif").style.WebkitAnimationPlayState = "paused";
        document.getElementById("faux-braid-gif").style.AnimationPlayState = "paused";

        document.getElementById("topBraidOne-faux-gif").style.WebkitAnimationPlayState = "paused";
        document.getElementById("topBraidOne-faux-gif").style.AnimationPlayState = "paused";
    }
    }, 300);

    function scroll(ev){
        //alert("Hey!");
        userHasScrolled = true;

        if(window.pageYOffset>3000)
        {
            alert('We have reached 3000!');

            setInterval(function()
            {    
                if(userHasScrolled) {
                    //alert("Hello!");
                    document.getElementById("topBraidOne-faux-gif-Second").style.WebkitAnimationPlayState = "running";
                    document.getElementById("topBraidOne-faux-gif-Second").style.AnimationPlayState = "running";

                    userHasScrolled = false;
                }
            }, 100);
        }

        else if(window.pageYOffset>2000)
        {
            setInterval(function()
            {
            //alert("I am an alert box!");
                if(userHasScrolled) {
                    //alert("Hello!");
                    //alert("I am an alert box!");
                    document.getElementById("faux-braid-gif").style.WebkitAnimationPlayState = "running";
                    document.getElementById("faux-braid-gif").style.AnimationPlayState = "running";

                    userHasScrolled = false;
                }
            }, 100);
        }

        else if(window.pageYOffset>1500)
        {
            setInterval(function()
            {    
                if(userHasScrolled) {
                    //alert("Hello!");
                    document.getElementById("topBraidOne-faux-gif").style.WebkitAnimationPlayState = "running";
                    document.getElementById("topBraidOne-faux-gif").style.AnimationPlayState = "running";

                    userHasScrolled = false;
                }
            }, 100);
        }

    }

Answer 1

你的函数中有哪些部分没有运行？可能是因为你没有调用clearInterval()才会出现问题？

尝试如下所示：

    var userHasScrolled = false;

    //this runs if the user has scrolled        
    window.onscroll=scroll;


    var intervalId = setInterval(function()
    {
    if (userHasScrolled == false)
    {
        document.getElementById("faux-braid-gif").style.WebkitAnimationPlayState = "paused";
        document.getElementById("faux-braid-gif").style.AnimationPlayState = "paused";

        document.getElementById("topBraidOne-faux-gif").style.WebkitAnimationPlayState = "paused";
        document.getElementById("topBraidOne-faux-gif").style.AnimationPlayState = "paused";
    }
    }, 300);

    function scroll(ev){
        //alert("Hey!");
        userHasScrolled = true;

        if(window.pageYOffset>3000)
        {
            alert('We have reached 3000!');

            clearInterval(intervalId);
            intervalId = setInterval(function()
            {    
                if(userHasScrolled) {
                    //alert("Hello!");
                    document.getElementById("topBraidOne-faux-gif-Second").style.WebkitAnimationPlayState = "running";
                    document.getElementById("topBraidOne-faux-gif-Second").style.AnimationPlayState = "running";

                    userHasScrolled = false;
                }
            }, 100);
        }

        else if(window.pageYOffset>2000)
        {
            clearInterval(intervalId);
            intervalId = setInterval(function()
            {
            //alert("I am an alert box!");
                if(userHasScrolled) {
                    //alert("Hello!");
                    //alert("I am an alert box!");
                    document.getElementById("faux-braid-gif").style.WebkitAnimationPlayState = "running";
                    document.getElementById("faux-braid-gif").style.AnimationPlayState = "running";

                    userHasScrolled = false;
                }
            }, 100);
        }

        else if(window.pageYOffset>1500)
        {
            clearInterval(intervalId);
            intervalId = setInterval(function()
            {    
                if(userHasScrolled) {
                    //alert("Hello!");
                    document.getElementById("topBraidOne-faux-gif").style.WebkitAnimationPlayState = "running";
                    document.getElementById("topBraidOne-faux-gif").style.AnimationPlayState = "running";

                    userHasScrolled = false;
                }
            }, 100);
        }

    }

例如，您可以在w3schools documentation page上找到有关clearInterval()的更多信息