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);
        }

    }

有关clearInterval()的更多信息，例如w3schools documentation page

在javascript中检测Y位置的问题

1 个答案: