fullpage.js：特定部分的正常滚动？

Question

我正在构建一个基于最新的fullpage.js版本（开发人员许可证）的多个部分的复杂页面。我有3个全高度部分，自动滚动，然后3个子部分。在代码中它基本上看起来像这样：

<div id="fullpage">
   <div class="section">content</div>
   <div class="section">content</div>
   <div class="section">content</div>
   ...
   <div class="section sub-section">content</div>
   <div class="section sub-section">content</div>
   <div class="section sub-section">content</div>
</div>

我希望这些子部分具有正常的滚动，这可能吗？

Answer 1

还没有fullPage.js提供的东西。您可以做的最多的事情是包括站点最后一部分中的所有最后部分，然后使用scrollOverflow:true模拟this example中的正常滚动行为。

看到这个demo online

<div id="fullpage">
   <div class="section">content</div>
   <div class="section">content</div>
   <div class="section">content</div>
   <div class="section">
       <div class="sub-section">sub content</div>
       <div class="sub-section">sub content</div>
       <div class="sub-section">sub content</div>
    </div>
</div>

使用这样的东西：

sub-section{
  height: 100vh;
  width: 100%;
}
.sub-section{
  background: red;
}
.sub-section:nth-child(1){
  background: red;
}
.sub-section:nth-child(2){
  background: blue;
}