时间戳

首页 > 解决方案 > 当 document.addEventListener('scroll') 存在时如何停止背景抖动

javascript - 当 document.addEventListener('scroll') 存在时如何停止背景抖动

问题描述

我有以下代码：

document.addEventListener('scroll', (event) => {
    // Make BG not scroll with the window
    let e = document.querySelector('body .bg-img');
    let topValue = scrollY*0.5;
    e.style.top = `${topValue}px`;
});

当我尝试滚动时，背景会像疯了一样摇晃起来。我在网上查了一下，好像没有答案。我认为它可能有一些事情要做，计算起来真的很慢，我是否走在正确的道路上，在这种情况下，我该如何解决？

标签： javascriptaddeventlistener

解决方案

如果您希望.bg-top背景元素不随窗口滚动，则应改用 css 属性position: fixed。

运行下面的代码片段，看看它是如何工作的：

html, body {margin: 0; padding: 0; width: 100%; height: 100%;}
.bg-img{
  background: url("//picsum.photos/200/100");height: 100px;width: 100%;
  position:fixed;
  top:0;
}
<div class="bg-img"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
</p>

但是，如果您出于某种原因必须使用 JavaScript，您可以更改position滚动时的属性值并将该top属性分配给0.

运行下面的代码片段，看看它是如何工作的：

document.addEventListener('scroll', () => {
    // Make BG not scroll with the window
    let e = document.querySelector('body .bg-img');
    e.style.position = "fixed";
    e.style.top = "0";
});
html, body {padding: 0; width: 100%; margin: 0px 0px 0px 0px; height: 100%;}
.bg-img{background:url("//picsum.photos/200/100");height: 100px; width: 100%;}
<div class="bg-img"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
</p>

推荐阅读