2

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

我的代码在这里：

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

这是 codepen 的链接，它准确地显示了我在说什么： http ://codepen.io/reskk/pen/qaYJwq

编辑：整页 Codepen：http ://codepen.io/reskk/full/qaYJwq/

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

当浏览器处于其最大宽度（和最大高度，由于代码输入框的原因，您无法完全使用 codepen）时，就会发生不稳定的滚动。

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

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

谢谢，

雷斯克

4

2 回答 2

1

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

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

CSS Parallax by davidwalsh

编辑删除的框架/库参考（offtopic）

于 2016-10-11T22:53:32.220 回答
0

我对同样的问题感到压力，并在这里找到了一个可爱的解决方案：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;
  }
于 2021-03-25T19:33:52.253 回答