“Javascript视差效果”；“缺少像素”；

我的“视差效应”代码有问题。每次我向上或向下滚动，脚本都会以相反的方向移动div 1px，因此，我们可以说，如果我向下滚动300px，div将向上移动300px，如果我们向上滚动300px，div应该回到正常位置。问题是，每次我上下滚动div时，它似乎都会从原来的位置移动1或2 px

 window.onscroll = function() {

        newpos = window.scrollY



        if (oldpos < newpos) {

            red.style.transform = "translateY(" + move-- + "px)";

            red.innerHTML = move;

        } else {

            red.style.transform = "translateY(" + move++ + "px)";
            red.innerHTML = move;

        }



        oldpos = window.scrollY


    }

window.onscroll=function（）{
newpos=window.scrollY
如果（旧位置<新位置）{
red.style.transform=“translateY”（+move--+px）”；
red.innerHTML=移动；
}否则{
red.style.transform=“translateY”（+move+++px）”；
red.innerHTML=移动；
}
oldpos=window.scrollY
}

Jsfiddle：

---

滚动事件不是等距触发的（当然不是每像素触发的），并且任何东西都不能保证穿越一段距离的滚动事件的数量。一个快速的短卷轴比一个缓慢的长卷轴有更少的事件，虽然它们可能覆盖相同的距离

由于向上滚动和向下滚动彼此不同，计数（

move++

/

move--

）将很容易失去同步。相反，您应该始终从滚动位置导出元素的位移

 window.onscroll = function() {

        newpos = window.scrollY



        if (oldpos < newpos) {

            red.style.transform = "translateY(" + move-- + "px)";

            red.innerHTML = move;

        } else {

            red.style.transform = "translateY(" + move++ + "px)";
            red.innerHTML = move;

        }



        oldpos = window.scrollY


    }

为了保持元素的位置，推导很简单：精确地按滚动高度进行平移。您可以简单地执行

position:fixed

来实现这一点

const red=document.getElementById（“红色”）；
常数pos=200；
window.onscroll=函数（）{
const move=pos+window.scrollY；
red.style.transform=“translateY”（+move+“px）”；
red.innerHTML=移动；
}
window.onscroll（）；//初始化

*{
边际：0px；
}

---

滚动事件不是等距触发的（当然不是每像素触发的），并且任何东西都不能保证穿越一段距离的滚动事件的数量。一个快速的短卷轴比一个缓慢的长卷轴有更少的事件，虽然它们可能覆盖相同的距离

由于向上滚动和向下滚动彼此不同，计数（

move++

/

move--

）将很容易失去同步。相反，您应该始终从滚动位置导出元素的位移

 window.onscroll = function() {

        newpos = window.scrollY



        if (oldpos < newpos) {

            red.style.transform = "translateY(" + move-- + "px)";

            red.innerHTML = move;

        } else {

            red.style.transform = "translateY(" + move++ + "px)";
            red.innerHTML = move;

        }



        oldpos = window.scrollY


    }

为了保持元素的位置，推导很简单：精确地按滚动高度进行平移。您可以简单地执行

position:fixed

来实现这一点

const red=document.getElementById（“红色”）；
常数pos=200；
window.onscroll=函数（）{
const move=pos+window.scrollY；
red.style.transform=“translateY”（+move+“px）”；
red.innerHTML=移动；
}
window.onscroll（）；//初始化

*{
边际：0px；
}

什么是移动？您从未声明或初始化过它？为什么不简单地使元素

位置：fixed

？move是页面顶部和div之间的距离，move=200，transform:translateY（200px），因此，当您滚动页面时，脚本将替换div（200）+1px…哦，现在我明白了，你在那里增减移动…不，你不能那样做。你是什么意思？我确实这样做了，问题是每次我向上或向下滚动div时，div都会从原始位置移动…什么是

移动
？您从未声明或初始化过它？为什么不简单地使元素
位置：fixed
？move是页面顶部和div之间的距离，move=200，transform:translateY（200px），因此，当您滚动页面时，脚本将替换div（200）+1px…哦，现在我明白了，你在那里增减移动…不，你不能那样做。你是什么意思？我确实这样做了，问题是每次我向上或向下滚动div时，div都会从原来的位置移动。。。