如何将背景扩展到整个网页？

Question

我将 .matrix-background 设置为position：固定并调整宽度、高度和顶部属性，使其覆盖整个页面。

我在JavaScript中使用

document.body.scrollHeight

来计算页面高度，希望动画能够覆盖整个页面。

我想要整个网页上的矩阵背景，即使我向下滚动到最后，但我只能得到第一个容器的背景

这是我的

index.html

矩阵背景

.matrix-background {
  position       : fixed;
  top            : 0;
  left           : 0;
  width          : 100vw;
  height         : 100vh;
  pointer-events : none;
  z-index        : -1;
  overflow       : hidden;
}

这是我的背景脚本

const characters       = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
const matrixBackground = document.querySelector('.matrix-background');

function createMatrix() {
  const span            = document.createElement('span');
  span.style.position   = 'absolute';
  span.style.color      = 'green';
  span.style.fontSize   = '20px';
  span.style.whiteSpace = 'nowrap';
  span.style.opacity    = Math.random();
  span.textContent      = characters.charAt(Math.floor(Math.random() * characters.length));
     
  const x         = Math.random() * window.innerWidth;
  span.style.left = `${x}px`;
  span.style.top  = `-${Math.random() * 100}px`;  // Start just  above the viewport 

  matrixBackground.appendChild(span);
       
   // The span falls down to cover the visible viewport and beyond to mimic continuous effect
  const fallDuration = Math.random() * 3 + 2;
  span.animate(
    [ { transform: 'translateY(0)' }
    , { transform: `translateY(${window.innerHeight * 2}px)` }
    ]
    , { duration   : fallDuration * 1000
      , easing     : 'linear'
      , iterations : 1
      , fill       : 'forwards'
      }
    );
       
  setTimeout(() => { span.remove(); }, fallDuration * 1000);
}

setInterval(createMatrix, 100);

Answer 1

试试这个：

html, body {
  height: 100%;
}