javascript - 背景附件固定替代品

Question

我刚刚遇到一个问题，我在同一页面上有 2 个主图部分，我必须在它们上使用 background-attachment: fixed。不用说，在大多数浏览器(看看你的 IE)上，滚动速度非常慢。所以性能不是很好。哦，这个网站也有一些视差滚动元素(使用 stellar.js)平滑滚动(为此使用:nicescroll.js)。当然，我把图像做得尽可能小，并尽量不使用 background-size: cover (再次表现)。哦，我在我的 core.js 文件中使用了 window.requestAnimationFrame()(再次表现)。

有没有办法让这 2 个英雄部分图像像 background-image: fixed 一样工作？

index.html

<div class="first-hero">

</div>
<div class="content">
    .
    .
    lots of parallax content goes here
    .
    .
</div>
<div class="second-hero">

</div>

样式.css

.first-hero{
  background: transparent url('image1.jpg') no-repeat;
  background-attachment: fixed;
  height:400px;
  width:100vw;
}
.second-hero{
  background: transparent url('image2.jpg') no-repeat;
  background-attachment: fixed;
  height:350px;
  width:100vw;
}
.content{
  width:100vw;
  height:2500px;
}

Answer 1

从历史上看，background-attachment:fixed; 一直存在性能问题。我建议使用 position:fixed; 元素代替。

然后，您可以使用 transform:translateZ(0); 使固定背景和可滚动内容部分位于 GPU 中它们自己的层上 - 这应该会提供额外的性能提升。

fiddle :https://jsfiddle.net/gstnr9w5/1/

.fixed-background{
  position:fixed; 
  left:0;
  top:0;
  right:0;
  bottom:0;
  background:url(https://unsplash.it/1000/1000?image=1080);
  background-size:cover;
  background-position:center center;
  z-index:0;
}

.content{ position:relative; z-index:1; color:white; font-size:22px; line-height:32px; font:serif; padding:80px; }


.fixed-background, .content{
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  -moz-transform:translateZ(0);
}