存在document.addEventListener（'scroll'）時如何停止背景抖動

Question

我有以下代碼：

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`;
});

當我嘗試滾動時，背景像瘋了似的搖晃起來。 我在互聯網上看過，似乎沒有答案。 我認為它可以做些事情，但是計算起來確實很慢，我走對了路，在那種情況下，我該如何解決呢？

Answer 1

Javascript不是這樣做的正確方法。 您應該改用CSS：

body {
  background-image: url("img_tree.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Answer 2

如果您不希望.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>