简单的问题很难解释，所以我拍了一段视频。见链接: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
关于javascript - 为什么 scrollTop 会跳动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25041925/