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

【问题标题】：How to create a gradient background on infinite scroll?如何在无限滚动上创建渐变背景？
【发布时间】：2020-02-08 09:07:30
【问题描述】：

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

我发现这个无限滚动代码适用于时间和日期。我想用渐变任务替换它。

<!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>

【问题讨论】：

你试过什么？有代码吗？
请提供您的无限滚动代码
如果它是无限的，你怎么知道渐变应该基于什么？
stackoverflow.com/questions/31302983/…
刚刚添加了代码。我认为渐变可能只是整个页面中的一个循环色块

标签： javascript html css gradient infinite-scroll

【解决方案1】：

真的很简单，无需复杂化。鉴于渐变被视为背景图像，您可以这样重复它。背景可以“无限”重复，所以我们可以将背景的垂直高度设置为我们知道会重复的东西。即定义了渐变，使用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

【讨论】：