如何在fullpage.js中忽略整页容器之外的div

Question

我在整页容器之外有一个div。如何正常滚动直到div结束？这样每个部分都可以正确地适合视口吗？

示例：

<div class="dev"> <!-- Div outside the fullpage container -->


</div>


<div id="fullpage">
    <div class="section">
      Section 1
      <div class="scrollable-content">
        <h4>Scroll me</h4><h4>Scroll me</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4>
      </div>
    </div>
    <div class="section">
        <div class="slide" data-anchor="slide1">
          Slide 2.1
           <div class="scrollable-content">
        <h4>Scroll me</h4><h4>Scroll me</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4><h4>Text here</h4>
      </div>
        </div>
        <div class="slide" data-anchor="slide2">Slide 2.2</div>
    </div>
    <div class="section">Section 3</div>
    <div class="section">Section 4</div>
</div>

这里是Codepen

Answer 1

很遗憾，fullPage.js不允许您这样做。您最多可以做的是使用一个节中的内部滚动条来模拟普通滚动，可以看到in this example使用选项scrollOverflow:true。

您可以通过阅读此问题来了解一些可能的方法，但是这将需要您使用选项scrollBar:true和一些自定义编码：https://github.com/alvarotrigo/fullPage.js/issues/3205