Question

很难解释的简单问题，所以我拍了一段视频。请参见链接：http://1drv.ms/1zvrYV8

当我向下滚动页面时，它可以完美地替换系列中的下一个图像。

问题：当我停止滚动时，它会将图像弹回到较早的图像。我记录了什么scrollTop（这是我的视频中记录到控制台的内容）正在返回，并且在滚动结束时（当我从鼠标垫抬起手指时）它会返回0左右的低值。

这是为什么？当我从滚轮或滚轮上抬起手指时，我只想让它保持原状。

以下是我的代码：

<html>
<meta charset="UTF-8">
<head>
<script type="text/javascript">
    var lastScrollTop;
    function mainScript(){
        bgResize();
        lastScrollTop = document.body.scrollTop;
        window.addEventListener("scroll", bgAnimation, false);
        window.addEventListener('resize', bgResize);
    }

    function bgAnimation(){

        var currentScrollTop = document.body.scrollTop;
        var currentBg = document.getElementById("pictureAnimation").src;
        var currentBgNum = currentBg.substring(currentBg.length-8, currentBg.length-4);
        console.log(lastScrollTop);


        if(currentScrollTop > lastScrollTop){
            if((currentBgNum < 0196) && (currentBgNum > 99)){
                var nextBgNum = Number(currentBgNum)+1;

                nextBgNum = String("0" + nextBgNum);
                var nextBg = currentBg.replace(currentBgNum, nextBgNum);
                document.getElementById("pictureAnimation").src = nextBg;
                lastScrollTop = currentScrollTop;
            }
        }
        else if(currentScrollTop < lastScrollTop){
            if((currentBgNum < 0197) && (currentBgNum > 100)){
                //decrement image number by 1
                var nextBgNum = Number(currentBgNum)-1;
                //update image      
                nextBgNum = String("0" + nextBgNum);
                var nextBg = currentBg.replace(currentBgNum, nextBgNum);
                document.getElementById("pictureAnimation").src = nextBg;
                lastScrollTop = currentScrollTop;
            }
        }
    }

function bgResize(){

    var newWindowWidth = 0, newWindowHeight = 0;
    var emcPictureHeight = 1080, emcPictureWidth = 1920;
    if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        newWindowWidth = window.innerWidth;
        newWindowHeight = window.innerHeight;
    } 
    else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        newWindowWidth = document.documentElement.clientWidth;
        newWindowHeight = document.documentElement.clientHeight;
    }        
    else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        newWindowWidth = document.body.clientWidth;
        newWindowHeight = document.body.clientHeight;
    }

    var scale = Math.max(newWindowWidth/emcPictureWidth, newWindowHeight/emcPictureHeight);
    var width = scale * emcPictureWidth , height = scale * emcPictureHeight;
    var left = (newWindowWidth-width)/2 , top = (newWindowHeight-height)/2;
    var emcView = document.getElementById("emcView"); 
    document.getElementById("emcView").style.width = width + "px";
    emcView.style.height = height + "px";
    emcView.style.position = "fixed";
    emcView.style.left = left + "px";
    emcView.style.zindex = 0;
    emcView.style.top = top + "px";
    //return true;
}
    window.onload=function() {
        mainScript();
    };

</script>
<noscript>
    <h3>This site requres JavaScript</h3>
</noscript>
<title> ELDP Awesomeness </title>
<style>
    #emcView {
width:10px;
}
</style>
</head>

<body cz-shortcut-listen="true">
    <div id ="emcView">
            <image id = "pictureAnimation" src="Sequence_Pictures/Sequence0100.jpg">
        </div>

</body>
</html>

Answer 1

您正在根据图片文件名的数量更新lastScrollPosition，请尝试：

if(currentScrollTop > lastScrollTop){
    if((currentBgNum < 0196) && (currentBgNum > 99)){
        var nextBgNum = Number(currentBgNum)+1;

        nextBgNum = String("0" + nextBgNum);
        var nextBg = currentBg.replace(currentBgNum, nextBgNum);
        document.getElementById("pictureAnimation").src = nextBg;
        //lastScrollTop = currentScrollTop;   remove this
    }
}
else if(currentScrollTop < lastScrollTop){
    if((currentBgNum < 0197) && (currentBgNum > 100)){
        //decrement image number by 1
        var nextBgNum = Number(currentBgNum)-1;
        //update image      
        nextBgNum = String("0" + nextBgNum);
        var nextBg = currentBg.replace(currentBgNum, nextBgNum);
        document.getElementById("pictureAnimation").src = nextBg;
        //lastScrollTop = currentScrollTop;   remove this
    }
}

lastScrollTop = currentScrollTop;  // put it here so that it gets updated on every scroll event

为什么scrollTop会跳起来？

1 个答案: