Javascript 如何根据用户使用纯JS滚动来转换divs位置？

我正在寻找一个类似的单一部门

但是，我不希望函数为整个页面设置事件侦听器，我希望div进入用户视口后，div根据用户滚动开始变换其位置，类似于此网站（网站中间）

我不想使用JQuery，只想使用纯JavaScript

我如何制作一个迭代计数器，使div的移动与用户滚动相关联，从而平滑？ 我应该让JS函数迭代调用CSS类吗？ 我应该使用交叉点观察者来打开/关闭移动功能吗

我的逻辑是否正确？如果我是，我将如何创建它

Intersection Observer (check if user is intersecting container which has the div which moves in it)
Height of Page & Height of Viewport (to calculate scroll speed/amount)

if intersecting => 
   Movement function
     check if user is scrolling up/down
       if user scroll down =>
        move div RTL X amount depending on scroll amount
       else user scroll up =>
        move div LTR X amount depending on scroll amount
not intersecting =>
   Deactivate function

---

下面是一个简短的示例，您可以根据需要进行编辑

下面的代码会给你一些线索

您现在可以收听窗口滚动，并使用变换移动元素

然后应用所需的条件，并根据需要调整代码：）

//来源信用：http://thenewcode.com/279/Rotate-Elements-on-Scroll-with-JavaScript
var item=document.getElementById（'item'））
var item1=document.getElementById（'item1'）
;（功能（）{
var节流阀=功能（类型、名称、obj）{
var obj=obj | |窗口；
var running=false；
var func=函数（）{
if（正在运行）{return；}
运行=真；
requestAnimationFrame（函数（）{
对象dispatchEvent（新CustomEvent（名称））；
运行=错误；
});
};
对象addEventListener（类型，函数）；
};
节气门（“滚动”、“优化滚动”）；
})();
addEventListener（“optimizedScroll”，函数（）{
item.style.transform=“translate（0px，+window.pageYOffset*10+”）”；
item1.style.transform=“translate（0px，+window.pageYOffset*5+”%）；
})

正文{
高度：200vh；
}
.项目{
高度：50px；
宽度：50px；
背景色：红色；
边界半径：50%；
显示：内联块；
}

---

试试用JS编写代码，如果遇到问题，请向我们展示结果。就我个人而言，我会使用IntersectionObserver来告诉我一个部分何时进入和离开视口，因为这很容易，并且避免了用户每次在该部分外滚动时都要查看，但这可能没有“应该”的意思。