FullPage.js 1 div 是所有部分的背景

Question

我只是在搞乱 FullPage.js 扩展，看看它是否可以帮助我实现我想要的结果。基本上我希望一个 div 作为所有部分的背景，在我的情况下，它不是我想要保留在背景中的视频或图像，而是一个threejs 动画，每次运行脚本都会浪费资源。我已经试过了

 <div id="fullpage">
  <!-- id="webgl" Three js script would be loaded here --> 
  <div class="section">Some section</div>
  <div class="section">Some section</div>
  <div class="section">Some section</div>
</div>

我尝试用这个设置加载脚本的 div 的样式

#webgl{
 width: 100%; 
 height: 100%;
 position: fixed;
}

到目前为止，只有第一部分的内容会根据需要显示在加载的脚本上，但是当我滚动到第二部分时，即使位置固定，脚本也不再可见。有人有什么想法吗？

Answer 1

如果你想固定背景，你可以尝试background-attachment属性，在内容中添加以下内容。

background-attachment: fixed;

或者，您是否尝试过将您的固定内容放在整页元素之外：

<!-- id="webgl" Three js script would be loaded here -->
<div id="fullpage">

  <div class="section">Some section</div>
  <div class="section">Some section</div>
  <div class="section">Some section</div>
</div>

并设置部分属性

background: transparent;

也许你可以试一试。

Answer 2

也许您可以添加“溢出：滚动；”