更新

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），因为特别是在移动设备上，幻灯片的内容有时会高于屏幕高度。

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

如果手指向左或向右移动，水平开关开关滑动
垂直开关滑动：仅当滑动滚动到底部并且手指向下移动时，下一个底部滑动。下一张顶部幻灯片：仅当幻灯片滚动到顶部并且手指向上移动时。

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

Answer 1

我不建议您将scrollOverflow用于移动设备。

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

您可以在移动设备上内容溢出的部分使用课程fp-auto-height。您应该只在网站获得响应时添加它，即在某些宽度或高度限制下。

这样，这些部分将能够大于设备视口。

将其与fullpage.js的responsiveHeight或responsiveWidtdh选项（设置autoScrolling:false）相结合，您将能够在小屏幕设备上拥有一个响应迅速的网站。

作为示例，您可以使用小视口查看this site using 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-heigh的内容非常相似：

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

更新

fullpage.js现在为同一目的提供了类fp-auto-height-responsive。更多in the docs。

Answer 2

问题实际上与fullpage.js本身无关 - 它实际上是无效的插件修改。

然而，其他一些人遇到过此问题：请检查任何其他HTML，CSS和特别是JavaScript ，因为这最有可能导致问题。

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

2 个答案:

更新