Fullpage.js和移动设备：如果必须启用内容溢出，如何启用部分/幻灯片切换？

Question

尝试了一些选项后，我仍然没有得到满意的结果：

使用的Javascript库是FullpageJS(http://alvarotrigo.com/fullPage/)

Fullpage.js被以下设置初始化：

$('#fullpage').fullpage({
   sectionsColor: colors,
   anchors: anchors,
   scrollOverflow: true,
   afterSlideLoad: function() {
      startTheSliders();
   },
   onLeave: function(index) {
        setTimeout(function() {
            $.fn.fullpage.scrollSlider(index,0);
        },1000);
   }
});

重要提示：根据文档要求，必须设置scrollOverflow:true（并且必须设置为true），因为在移动设备上，幻灯片的内容有时比屏幕高度还要高。

然而，绝对必要的是用户可以使用手指在幻灯片之间进行水平和垂直切换（不是导航）。预期的行为如下：

1. 水平切换幻灯片：如果手指向左或向右移动，则切换到下一张幻灯片

2. 垂直切换幻灯片：只有当幻灯片滚动到底部且手指向下移动时，才能进入下一张底部幻灯片。只有当幻灯片滚动到顶部且手指向上移动时，才能进入下一张顶部幻灯片。

（前）开发项目可以在这里找到：http://www.studiodankl.com/

- Blackbam

Answer 1

我不建议您在移动设备上使用scrollOverflow。

如果您想要一个真正响应式的网站，您应该将内容适应设备，而不是使用“hacky”滚动条来适应内容。

您可以在移动设备上需要溢出内容的部分使用类fp-auto-height。只有在您的网站变得响应式之后，即在一定的宽度或高度限制下，才应添加它。

这样，这些部分就能比设备视口更大。

结合fullpage.js的responsiveHeight或responsiveWidtdh选项（设置autoScrolling:false），您将能够在小屏幕设备上拥有非常响应式的网站。

例如，您可以查看使用fullpage.js的此网站，并使用小视口。它没有使用fp-auto-height选项，但结果完全相同。

在那种情况下，该网站使用了以下内容：

/*screen resolutions smaller than 950px height*/
@media (max-width: 950px){
    #section3.fp-section,
    #section3 .fp-tableCell{
        height: auto !important;
        min-height: 100%;
    }
}

这与fullpage.js中使用的fp-auto-height非常相似:

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
    height: auto !important;
}

更新

现在，fullpage.js提供了fp-auto-height-responsive类来实现相同的功能。 更多信息请参见文档。

- Alvaro

---

谢谢，不过客户希望在移动设备上可以滑动浏览幻灯片。 - Blackbam

Answer 2

实际上，这个问题与fullpage.js本身无关——它实际上是一个插件修改无效的问题。

但是，正如其他人所经历的一样：检查任何额外的HTML、CSS和尤其是JavaScript，因为这很可能会引起问题。

- Blackbam