Javascript 尝试在页面滚动时在后台实现一些效果

我试图在标题中实现这个效果，当滚动时背景会上下移动 这是一个例子

这是我试过的

---

它几乎完成了所需的操作，但当我尝试向上滚动时出现了一些问题，每次滚动事件后，您都忘记设置

lastcolltop

变量，因此它总是认为您在向下滚动。只需将

this.lastcolltop=st

作为

onScroll

函数中的最后一行，如下所示：

onScroll（事件）{
const st=window.pageYOffset | | document.documentElement.scrollTop；
如果（st>this.lastScrollTop）{
这个.pxToMove-=3；
this.background.nativeElement.style.transform=`translateY（${this.pxToMove}px）`；
}否则{
这个.pxToMove+=3；
this.background.nativeElement.style.transform=`translateY（${this.pxToMove}px）`；
}
this.lastScrollTop=st；
}

这里有一种方法来压缩这个函数，并让它根据您滚动的距离来改变位置

onScroll（事件）{
const st=window.pageYOffset | | document.documentElement.scrollTop；
//根据新旧滚动条之间的差异移动图像
this.pxToMove-=（st this.lastScrollTop）；
this.background.nativeElement.style.transform=`translateY（${this.pxToMove}px）`；
//将上一个scrollTop设置为
this.lastScrollTop=st；
}

当我快速滚动时仍然存在同样的问题快速滚动的问题来自这样一个事实，即无论滚动多远，图像都只移动了3个像素。您可以改为使用

lastScrollTop

和

st

之间的差异来更改偏移量，事实上，这会使整个过程稍微短一点，因为您不需要检查是否已向上或向下滚动，我将在一秒钟内更新我的答案以演示这一点。@khaledmahmoud我更新了答案，这是第二段代码