修复了线性渐变上的背景附件导致滚动滞后答案

【问题标题】：Fixed background attachment on a linear gradient causes lag on scroll修复了线性渐变上的背景附件导致滚动滞后
【发布时间】：2021-10-24 21:19:25
【问题描述】：

我一直在尝试将线性渐变作为我的背景，但是，当我使用background-attachment: fixed 时，似乎出现了一个持续存在的问题。似乎在移动设备上，当您尝试快速向下滚动页面时，页面会滞后，并且渐变会尝试填充空白。

我查看了多个尝试转换背景的选项，但到目前为止都没有成功。

Issue on android

这是我的身体 css 的样子：

body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

引用背景的 CSS：

body, nav, #footer {
         background: linear-gradient(45deg, hsla(216, 100%, 17%, 1) 0%, hsla(206, 80%, 29%, 1) 47%, hsla(206, 80%, 29%, 1) 83%);
         background: -moz-linear-gradient(45deg, hsla(216, 100%, 17%, 1) 0%, hsla(206, 80%, 29%, 1) 47%, hsla(206, 80%, 29%, 1) 83%);
         background: -webkit-linear-gradient(45deg, hsla(216, 100%, 17%, 1) 0%, hsla(206, 80%, 29%, 1) 47%, hsla(206, 80%, 29%, 1) 83%);
         background-attachment: fixed;
     }

HTML 格式如下：

<body>
    <nav>Navbar</nav>

    <div class="container">
        Page content
    </div>

    <div id="footer">
        <p>Developed</p>
    </div>
</body>

页脚似乎对手头的情况没有影响，但是当我删除它时，空白的大小会缩小。

当我将背景更改为纯色时，问题自行解决了。所以我很确定这个问题依赖于试图以负面方式覆盖空间的线性背景。

是否有任何设置可以对抗导致滚动的固定附件？我现在无法删除它，因为颜色会发生可怕的变化。

【问题讨论】：

缺少背景的 CSS 代码。请提供与您的问题相关的所有代码，以便我们更好地为您提供帮助。
@Ken 抱歉，我刚刚添加了它。

标签： html css background linear-gradients

【解决方案1】：

我无法复制您的页面，因为缺少代码/内容。但是，您应该只将背景应用于“body”，因为“nav”和“footer”在 body 内部。

在下面的示例中，我只将背景渐变应用于身体。此外，更改车身高度并移除溢出仅用于测试目的。我使用开发工具在移动设备上对此进行了测试，并且可以正常工作。

body {
  //overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 1920px;
  position: relative;
  background: linear-gradient(45deg, hsla(216, 100%, 17%, 1) 0%, hsla(206, 80%, 29%, 1) 47%, hsla(206, 80%, 29%, 1) 83%);
  background: -moz-linear-gradient(45deg, hsla(216, 100%, 17%, 1) 0%, hsla(206, 80%, 29%, 1) 47%, hsla(206, 80%, 29%, 1) 83%);
  background: -webkit-linear-gradient(45deg, hsla(216, 100%, 17%, 1) 0%, hsla(206, 80%, 29%, 1) 47%, hsla(206, 80%, 29%, 1) 83%);
  background-attachment: fixed;
}

<body>
  <nav>Navbar</nav>

  <div class="container">
    Page content
  </div>

  <div id="footer">
    <p>Developed</p>
  </div>
</body>

【讨论】：

您好，感谢您的回复。不幸的是，问题仍然存在。

【解决方案2】：

在尝试了一些 html 和 body 样式的高度设置后，我成功地克服了我的问题。

html {
    overflow: auto;
}

body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(to top, #051937, #001b49, #001b5a, #00196a, #0a1378);
    background-repeat: no-repeat;
    min-height: 100vh;
}

最初我将 html 样式的高度设置为 100vh，当我将其删除时，它并将 no-repeat 样式添加到正文中，一切似乎都运行良好。

【讨论】：