如何在无限滚动上创建渐变背景？

Question

我正在尝试创建一个无限滚动页面，其中背景是根据滚动位置而变化的渐变。

我发现了这个适用于时间和日期的无限滚动代码。我想用梯度任务代替它。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>

<body>

<h1>Scroll me</h1>

<script>
  function populate() {
    while(true) {
      let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
      if (windowRelativeBottom > document.documentElement.clientHeight + 100) break;
      document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
    }
  }

  window.addEventListener('scroll', populate);

  populate(); // init document
</script>

</body>
</html>

Answer 1

真的很简单，没必要把这个复杂化。假设渐变被视为背景图像，您可以这样重复它。背景可以重复 "infinitely" 因此，我们可以将背景的垂直高度设置为我们知道会重复的高度。即定义渐变后，使用 background-size:

background-size: 100% 400vh;
background-repeat: repeat-y; /* this is set to repeat by default, but putting this in helps drive the point home */

我们的渐变将每 4 个视口高度重复一次，由于您的 JS，文档会随着高度不断增加，所以我们看到它无限重复。只需确保渐变以与开始时相同的颜色结束，否则您会看到一个切口。

如果你不想看一些闪烁的颜色，请不要打开此代码笔：https://codepen.io/joshdavenport/pen/rNNOJWM

如何在无限滚动上创建渐变背景？

How to create a gradient background on infinite scroll?

html

javascript

css

gradient

infinite-scroll