Javascript 显示某些元素用户滚动

我想在用户滚动时显示一些元素（例如div）。 我看到了一个卷轴，但不起作用。因为我肯定用得不好。 没有JQuery，我找不到任何帮助。我不想使用JQuery

我试试这个：

var scroll = document.body.scrollTop;
var divLis = document.querySelectorAll("div");

for(let i = 0; i < divLis.length; i++) {
    if(scroll === divLis[i]) {
        divLis[i].style.transform = "translateX(0)";
        divLis[i].style.transition = "2s";
    }
}

 * {
        margin: 0;
        padding: 0;
        border: 0;
    }
    body {
        height: 200vh;
    }
    .left {
        width: 300px;
        height: 300px;
        background-color: red;
        position: absolute;
        top: 150%;
        transform: translateX(-300px);
        transition: 5s;
    }
    // HTML : 

    <div class="left"></div>

   // JS 

       var divLis = document.querySelector(".left");

window.addEventListener("scroll", function (e) {

    if(window.pageYOffset > 500) {
        console.log(window.pageYOffset)
        divLis.style.transform = "translateX(0)";
    }

})

var scroll=document.body.scrollTop；
var divLis=document.queryselectoral（“div”）；
for（设i=0；i

编辑：很抱歉，我刚刚注意到您不想要jQuery，但如果您改变主意，我会把它留在这里

---

这是一个事件处理程序，每当窗口或视口滚动时，函数都会在其中运行或启动。

我真的不知道您想做什么，但考虑到您对@uom pgregorio回答的响应，我猜您可能只需要一个纯JS滚动监听器：

window.addEventListener（'scroll'，function（）{}）
确定。。。我明白

我想试试这个：

var scroll = document.body.scrollTop;
var divLis = document.querySelectorAll("div");

for(let i = 0; i < divLis.length; i++) {
    if(scroll === divLis[i]) {
        divLis[i].style.transform = "translateX(0)";
        divLis[i].style.transition = "2s";
    }
}

 * {
        margin: 0;
        padding: 0;
        border: 0;
    }
    body {
        height: 200vh;
    }
    .left {
        width: 300px;
        height: 300px;
        background-color: red;
        position: absolute;
        top: 150%;
        transform: translateX(-300px);
        transition: 5s;
    }
    // HTML : 

    <div class="left"></div>

   // JS 

       var divLis = document.querySelector(".left");

window.addEventListener("scroll", function (e) {

    if(window.pageYOffset > 500) {
        console.log(window.pageYOffset)
        divLis.style.transform = "translateX(0)";
    }

})

*{
保证金：0；
填充：0；
边界：0；
}
身体{
高度：200vh；
}
.左{
宽度：300px；
高度：300px；
背景色：红色；
位置：绝对位置；
最高：150%；
转换：translateX（-300px）；
过渡期：5s；
}
//HTML:
//JS
var divLis=document.querySelector（“.left”）；
window.addEventListener（“滚动”，函数（e）{
如果（window.pageYOffset>500）{
console.log（window.pageYOffset）
divLis.style.transform=“translateX（0）”；
}
})

所以，这很简单，我什么都没想到

非常感谢你回答我

祝你周末愉快
你到底想实现什么目标？我同意你的看法，但文件太多了。我在寻找一个纯的解决方案JavaScript@KolaCaine好的-仅供参考88KB不是很重。