Javascript 如何使用纯CSS或CSS/JS（没有JQuery）使一个div的滚动速度比页面上的其他项目慢或快？

我所要做的就是使页面上的一个元素（div最容易）比页面上的其他项目滚动得慢或快。例如，当滚动时，这个特定的div将以其他项速度的50%或200%移动，等等

---

这似乎是一件简单明了的事情，但我找不到任何这样的例子。另外，我不想使用JQuery，其他人的粗略/过于复杂的第三方插件，等等。只是简单、干净、CSS和JS

所以我设法想出了一个不太复杂的方法，但是，它确实可以相对于用户的滚动速度进行滚动，但是可以使用滚轮、滚动条和键盘

它也会上下滚动

你可以改变速度以满足你的需要，但是10在我的滚动速度下降的过程中一直保持在视图中，但是当速度加快或使用Page down时，它就落在后面了

document.addEventListener（“DOMContentLoaded”，函数DOMContentLoaded（）{
//得到你想要减速的元素；
var slowDiv=document.getElementById（'slowDiv'）；
//将其style.top设置为offsetTop，因此如果未设置style.top，它仍将工作。
slowDiv.style.top=slowDiv.offsetTop+'px'；
//设置用于方向的最后一个滚动条
var lastScrollTop=0；
//获取要滚动的元素
var relativeSpeedDiv=document.getElementById（'main'）；
var moveLittle=函数moveLittle（速度，滚动）{
//获取慢速元素的当前顶部
var topVal=parseInt（slowDiv.style.top）；
//检查滚动方向
如果（isScrollingDown（滚动））{
topVal=topVal+速度；
}否则{
topVal=topVal-速度；
}
//设置慢元素的新顶部
slowDiv.style.top=topVal+'px'；
};
var isScrollingDown=函数isScrollingDown（滚动）{
var-retVal=false；
如果（滚动>上次滚动顶部）{
retVal=true；
}
lastScrollTop=scrollY；
返回返回；
};
window.onscroll=函数WindowScroll（）{
//发送速度和当前滚动条Y
moveLittle（10，这个是滚动的）；
}
});
.biggestBig{
保证金：自动；
自对准：居中；
宽度：90%；
最小高度：9999em；
}
.褪色{
背景：线性渐变（灰色、黑色）；
}
.慢{
宽度：2米；
高度：2米；
背景色：#ee9b0b；
位置：绝对位置；
}
好的，谢谢@ajaypane的回答，但实际上我找到了一种更简单的方法。我不敢相信没有人做过这件事——它远没有我见过的其他事情那么复杂

JS

CSS

HTML



在代码笔中，这里：

类似这样的内容：？？？有点，除了较慢或较快的滚动速度应保持恒定的较慢或较快速度，而且它还可以与滚动条一起工作……老实说，我不确定你是否可以这样做，因为浏览器默认滚动速度：/也许有人可以告诉meSo你是否只在滚动该元素时才想改变速度，或者你想让这部分在一起滚动时比页面的其他部分移动得慢吗？不确定我是否能想出/找到一种方法来实现这一点（至少现在是这样）。您可能需要自己为这个场景编写JS。但是如果您可以使用jQuery或JS插件，那么这里有一些可用的选项：（JS插件）或（需要jQuery）。抱歉，如果这不适合您的需要。
function parallax() {
    var s = document.getElementById("floater");
  var yPos = 0 - window.pageYOffset/5;  
  s.style.top = 50 + yPos + "%"; }

window.addEventListener("scroll", function(){
    parallax(); 
});

.section { position: relative; width: 100vw; height: 15vw; }
.object-in-3d { 
  margin-left: 45vw;
  width: 10vw; 
  height: 10vw; 
  background-color: #41ebf4; }

.float-center { 
  position: absolute; 
  top: 50%; }

#red { background-color: #f44141; }
#yellow { background-color: #f48342; }
#green { background-color: #f4dc41; }

#floater {}

<div class="section" id="red">&nbsp;</div>

<div class="section" id="yellow">
  <div class="object-in-3d float-center" id="floater">&nbsp;</div>
</div>

<div class="section" id="green">&nbsp;</div>