alvarotrigo.com/fullPage/ 和 bootstrap 3 栅格问题

Question

我正在使用alvarotrigo.com/fullPage/实现漂亮的全屏效果。同时我也在使用Bootstrap 3网格系统，如下所示：

<section id="section" class="section">
  <div class="home">
      <div class="container-fluid position-relative">
          <div class="row">
              <div class="col-sm-4">
              </div>
              <div class="col-sm-4">
              </div>
              <div class="col-sm-4">
              </div>
          </div>
      </div>
  </div>

现在，我们看到3列，都在一个区域内关闭，这个html创建了3列视图，这很好。但是对于较小的视口，这三列会变成3个全宽列，这是问题，因为fullpage.js现在在滚动时跳过第二和第三列，所以如果我滚动到#section，我只能看到第一个div，如果我向下滚动，动画将转到另一个部分，跳过2和3 div。我创建了一个简单的插图。 我的问题是，我可以在fullpage.js上进行设置或进行一些调整，以便在向下滚动后脚本将显示这些div吗？谢谢。

- Marek Brzeziński

---

PS：fullpage脚本使<section>的高度等于视口的高度，所以我猜它是js特定的，而不是css... - Marek Brzeziński

如果在该部分使用了fp-auto-heigh类，则不会生效。 - Alvaro

Answer 1

我建议您使用一些 responsiveWidth 或 responsiveHeight 选项，在小屏幕设备上关闭自动滚动功能。

因此，您可以得到类似于这样的内容：

$('#fullpage').fullpage({
    responsiveWidth: 758
});

在线示例

- Alvaro

Answer 2

scrollOverflow: true将帮助您在每个完整的页面部分内滚动。

查看jsfiddle滚动溢出代码。

$('#fullpage').fullpage({
              sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
              scrollOverflow: true
});

- Sagar サガル