alvarotrigo.com/fullPage/ 和 bootstrap 3 网格问题答案

【问题标题】：alvarotrigo.com/fullPage/ and bootstrap 3 grid issuealvarotrigo.com/fullPage/ 和 bootstrap 3 网格问题
【发布时间】：2016-03-20 21:30:11
【问题描述】：

我正在使用 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。我创建了简单的插图。

div 2 和 div 3 显示为灰色，表示动画期间将跳过这些 div。

我的问题是，我可以在 fullpage.js 上进行设置或进行一些调整，以便脚本在向下滚动后显示这些 div 吗？

谢谢。

【问题讨论】：

PS：整页脚本使
视口高度为 100，所以我想，它是 js 特定的，而不是 css ....
如果在该部分中使用了fp-auto-heigh 类，则不会。

标签： javascript html fullpage.js

【解决方案1】：

我鼓励您使用一些responsiveWidth 或responsiveHeight 选项来关闭小屏幕设备上的自动滚动功能。

因此，你可以有这样的东西：

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

Example online

【讨论】：

【解决方案2】：

scrollOverflow: true 将帮助您在每个整页部分中滚动。

查看jsfiddle Code for ScrollOverflow

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

【讨论】：