为什么scrollTop跳

Why is scrollTop jumpy?

本文关键字：scrollTop 为什么      更新时间：2023-09-26

这个简单的问题很难解释，所以我拍了一个视频代替。参见链接: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>

您正在根据图像文件名的编号更新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
相关文章：