滾動時網頁視差背景抖動

Question

我編寫了我的第一個網站，我希望在滾動時在我的背景上產生視差效果。 它可以工作，但在某些計算機和/或某些瀏覽器上和/或某些 window 尺寸上，滾動時背景會上下抖動，同時仍會保持視差效果。 我無法弄清楚到底是什么組合導致了這個問題，這似乎是不一致的。

在 css 中，我的頁面主體上有一個垂直重復的背景圖像（六邊形圖案）：

body {
   background: #fff9ed;
   background-image: url("hexagon-side.png"), url("hexagon-side.png");
   background-position: 0px 0px, 100% 0px;
   background-repeat: repeat-y, repeat-y;
}

然后我使用以下 javascript 創建視差效果，使六邊形在滾動時比其他元素移動得慢：

window.addEventListener('scroll', function() {
   let scrollTop =  window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
   var currentOffset = '0px ' + scrollTop / 1.2 + 'px, 100% ' + scrollTop / 1.2 + 'px';
   document.getElementById("parallax").style.backgroundPosition = currentOffset;
});

最后我在 html 文件中的身體有 id 視差： <body id="parallax">

有沒有辦法解決這個問題？ 有沒有更好的方法來達到同樣的效果？ 這可能是什么原因造成的？

Answer 1

添加

background-attachment: fixed;

到 css 主體，並將 currentOffset 更改為

var currentOffset = '0px ' + scrollTop / -3 + 'px, 100% ' + scrollTop / -3 + 'px';

修復了抖動問題。

滾動時網頁視差背景抖動

問題描述

1 個解決方案

解決方案1
1 已采納 2022-11-30 22:40:54

滾動時網頁視差背景抖動

問題描述

1 個解決方案

解決方案1 1 已采納 2022-11-30 22:40:54

解決方案1
1 已采納 2022-11-30 22:40:54