Css 用“不停地滚动”；背景附件：固定“；

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

我的代码在这里：

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>

这里有一个指向代码笔的链接，正好显示了我所说的内容：

编辑：整页代码笔：

现在奇怪的是，当我将浏览器的大小调整到一个小的宽度（比如800px）时，滚动实际上变得非常平滑——就像你希望它出现在一个完成的项目上一样

当浏览器处于其最大宽度（以及最大高度，由于代码输入框的原因，您无法完全进入codepen）时，会发生异常的、不稳定的滚动

我已经对此进行了广泛的搜索，但没有找到解决方案

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

谢谢

---

Reskk

你知道你可以在整页中看到任何代码笔吗

关于你的

起伏

效果，你可能正在寻找一个

滚动动画平滑器

，不确定这是否是正确的术语。它所做的是延迟鼠标滚动效果，或减少“直线跳跃”高度，使移动看起来更好

视差

---

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

我也在强调同样的问题，并在这里找到了一个可爱的解决方案：

基本上，您需要从

.row

中删除背景图像，并将其移动到每个元素的

: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;
  }

---

这就像是一个极小的差别。不要自寻烦恼。在全浏览器大小下，差异是非常明显的，特别是如果你在文本编辑器中运行它并预览它，而不占用codepen框（即，访问站点的人会看到它的样子）。此外，这不是一个很好的方法（关于优化），我只是没有看到你的代码中有任何错误。也许是因为图片的分辨率或者你的电脑速度。只是帮不了你。对不起，没问题。我运行的是MBP 2014，因此它不会有任何问题。我认为这与分辨率有关，因为当浏览器宽度很小时，延迟消失了（谢天谢地。这个插件看起来很不错，但它并不是我想要的。这只不过是性能方面的问题。必须有办法解决它，这次是视差，而不是滑块：D@Andre这些是JavaScript库，可以根据滚动事件产生固定/视差背景效果on询问了一个带有固定附件的CSS背景，这与JS无关。我删除了库参考。Davidwalsh的一个是CSS演示，所以它是关于主题的。

.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;
  }