移动设备上的垂直滚动 fullpage.js

Question

我正在使用fullpage.js 插件创建幻灯片。我的幻灯片内容长度在每张幻灯片上都不同。在移动设备上，我的内容溢出并超出了移动屏幕的高度，这需要用户垂直向下滚动才能查看溢出的内容。但是，我无法垂直滚动，因为我的网页是为幻灯片设计的。我的问题是，当内容溢出而不是滚动幻灯片（水平）时，如何使幻灯片垂直滚动？我使用下面的代码来初始化整页。

$('#main').fullpage({
  lockAnchors: true,
  anchors: ['section'],
  loopHorizontal: false,
  controlArrows: false
});

我也使用fp-auto-height-responsive 类。

我的 HTML 页面的基本结构是

<div class="container-fluid section fp-auto-height-responsive">
  <div class="smooth-scroll smooth-scroll-top slide paralax" data-anchor="idOfNextSlide">
    Some Content
  </div>
</div>

使用 jQuery 处理导航

$.fn.fullpage.moveTo('section', $slide);

Answer 1

您可以使用Responsive Slides extension。

详细on the docs：

responsiveSlides：（默认为 false）fullpage.js 的扩展。当设置为 true 时，触发响应模式时，幻灯片将变成垂直部分。 （通过使用上面详述的 responsiveWidth 或 responsiveHeight 选项）。需要 fullpage.js >= 2.8.5。