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

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

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

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

Answer 1

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

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

您可以在您的内容将在移动设备上溢出的部分使用 class 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 现在出于同样的目的提供 class fp-auto-height-responsive。更多 in the docs.

Answer 2

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

然而，正如其他一些人遇到此问题一样：检查任何其他 HTML、CSS 和 ，尤其是 JavaScript，因为这很可能造成问题。

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

Fullpage.js and mobile devices: How to enable section / slide switch if content overflow must be enabled?

mobile

jquery

touch

fullpage.js

responsiveness

更新