带有“背景附件：固定”的不稳定滚动答案

【问题标题】：Choppy scrolling with "background-attachment: fixed"带有“背景附件：固定”的不稳定滚动
【发布时间】：2017-02-20 14:48:47
【问题描述】：

我遇到了背景附件问题：已修复。当我将它应用于页面上的元素时，它会产生非常不稳定的滚动效果。本质上不是对用户来说不是好的体验。

我的代码在这里：

HTML

<div class="con row1">
<p>Some text here just to flesh out example</p>
</div>

<div class="grad-space">
</div>

<div class="con row2">
<p>Some text here just to flesh out example</p>
</div>

CSS

.con {
height: 100vh; }

.grad-space {
 height: 50vh; }

.row1 {
background: url('https://s-media-cache-    ak0.pinimg.com/736x/3d/88/09/3d880927ac8bfec60a04ca93064569e0.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed; }

.row2 {
background:   url('https://d3rt1990lpmkn.cloudfront.net/640/31762579d8fd04a756fb791ac9c3634b5828f0dd') no-repeat center;
background-size: cover;
background-attachment: fixed; }

这是一个指向代码笔的链接，准确地显示了我在说什么： http://codepen.io/reskk/pen/qaYJwq

编辑：整页代码笔：http://codepen.io/reskk/full/qaYJwq/

现在奇怪的是，当我将浏览器缩小到一个小宽度（比如 800 像素）时，滚动实际上变得非常平滑 - 就像您希望它出现在已完成的项目上一样。

当浏览器处于其最大宽度（和最大高度，由于代码输入框的原因，您无法完全使用 codepen）时，就会出现卡顿、断断续续的滚动。

我对此进行了广泛的搜索，但未能找到解决方案。

有人对此有任何想法吗？这是一个如此华丽的效果，但不幸的是它产生的性能使其无用。

谢谢，

Reskk

【问题讨论】：

这就像一个最小的差异。不要打扰自己。
在全浏览器大小下差异非常明显，特别是如果您在文本编辑器中运行它并在没有占用代码笔框的情况下预览它（即访问该站点的人看起来如何。）此外，这不是一个很好的方法（关于优化）
我只是在您的代码中没有发现任何问题。也许是因为图片分辨率或您的计算机速度。就是帮不了你。对不起。
没问题，伙计。我在 MBP 2014 上运行，所以它不应该有任何问题。我认为它与分辨率有关，因为当浏览器宽度非常小时（

标签： css scroll background-image fixed background-attachment

【解决方案1】：

我也遇到了同样的问题，在这里找到了一个很好的解决方案：https://medium.com/vehikl-news/fixed-background-image-performance-issue-6b7d9e2dbc55

基本上，您需要从.rows 中删除背景图像，并将其移动到每个:before 元素中。这样你就不会在你的伪元素上使用background-position: fixed，而是使用position: fixed。

.hero {
  min-height: 100%;
  position: relative;
  overflow: hidden;

  &::before {
    background-image: url('background-image.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    content: '';
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    will-change: transform;
    z-index: -1;
  }

【讨论】：

【解决方案2】：

您知道您可以在整页中看到任何代码笔吗？ Fullpage Codepen

关于您的choppy 效果，您可能正在寻找scroll animation smoother，不确定这是否是正确的术语。它的作用是延迟鼠标滚动效果，或降低“跳线”高度，使移动看起来更好。

davidwalshCSS 视差

编辑删除的框架/库引用（离题）

【讨论】：

谢谢哥们。那个插件看起来很不错，但这并不是我想要的。这只是产生了一些关于性能的东西......必须有一些方法来解决它
Here is another alternative，这次是视差，不是滑块：D
@Andre Canilho 这些是基于滚动事件产生固定/视差背景效果的 JavaScript 库。问题是询问带有固定附件的CSS背景，与JS无关。
我删除了库引用。 Davidwalsh 的那个是一个 CSS 演示，所以它是主题。