Question

我想在用户滚动时显示一些元素（例如div）。我看到了一个scrollTop，但是没有用。因为我肯定使用得很厉害。没有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";
    }
}

Answer 1

老实说，我真的无法告诉你要做什么，但鉴于你对@ uom-pgregorio的答案的回应，我猜你可能只想要一个纯粹的JS滚动监听器：

window.addEventListener('scroll', function() {});

Answer 2

编辑：抱歉，我刚刚注意到你并不想要jQuery，但我会把它留在这里以防你改变主意。

$(window).scroll(function() {
    // show the div(s)
});

这是一个事件处理程序，只要窗口或视口滚动，该函数就会运行或触发。

Answer 3

好的......我明白了。

我想试试这个：

 * {
        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)";
    }

})

所以，它非常简单，我无所畏惧。

非常感谢你回答我！

享受你的周末

显示一些元素用户滚动

3 个答案: