Question

我遇到了背景附件问题：已修复。当我将它应用到我页面上的元素时，它会创建一个非常不连贯的滚动效果。基本上不是对用户来说不是好的经历。

我的代码在这里：

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

修改：Fullpage Codepen：http://codepen.io/reskk/full/qaYJwq/

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

当浏览器处于其最大宽度（和最大高度，由于代码输入框而无法完全获得代码输入框）时，就会发生抖动，不稳定的滚动。

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

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

谢谢，

Reskk

Answer 1

你知道你可以在整页中看到任何编码器吗？ Fullpage Codepen

关于choppy效果，您可能正在寻找的是scroll animation smoother，不确定这是否是正确的术语。它的作用是延迟鼠标滚动效果，或减少＆＃34;线跳跃＆＃34;高度，使运动看起来更好。

davidwalsh

的CSS视差

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

Answer 2

我一直在强调同样的问题，并在这里找到了一个可爱的解决方案：https://medium.com/vehikl-news/fixed-background-image-performance-issue-6b7d9e2dbc55

本质上，您需要从 .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;
  }

使用“背景附件：固定”

2 个答案: