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

Question

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

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

我也用fp-auto-height-responsiveclass.

我的 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: (default false) Extension of fullpage.js. When set to true slides will be turned into vertical sections when responsive mode is fired. (by using the responsiveWidth or responsiveHeight options detailed above). Requires fullpage.js >= 2.8.5.

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

Vertical scrolling on mobile device fullpage.js

html

javascript

css

fullpage.js