允许水平滚动整页部分

问题描述

这是我的代码。

如您所见，我在这里使用的是完整页面。我希望“部分”div 在移动设备上水平滚动。这是我尝试过的，但不起作用。

1. 让选项 = { 垂直居中：真， // 水平滚动：真， normalScrollElements: '.section',} new fullpage('#fullpage',options);

当我使用它时，它甚至垂直停止工作（使用 fullpagejs 的主要目的）。

2. fullpage_api.setAllowScrolling(true,'right');

解决方法

在使用 fullPage.js 时，您无法立即将垂直部分转换为水平部分。

但是，您可以做的是每次使用不同的 HTML 标记初始化 fullPage.js。不太理想！

水平滚动仅在 fullPage.js 上在单个部分内使用幻灯片时才可能。（剖面 = 垂直，滑动 = 水平）。

例如，此标记有 1 个包含 3 个水平幻灯片的部分：

<div id="fullpage">
  <div class="section">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
</div>

允许使用鼠标滚轮进行水平滚动的唯一方法是使用 Scroll Horizontally extension。

这种其他结构将创建 3 个垂直部分。

<div id="fullpage">
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
</div>

所以，要做你想做的事，你基本上必须：

1- 为手机（小屏幕设备）使用与桌面不同的标记 2- 为适当的标记初始化 fullpage.js 3- 在向上/向下调整大小的情况下，您可能需要销毁并初始化新的。

所以，就我个人而言，我会避免这种情况，我只会使用默认的响应模式来禁用移动设备上的快速滚动。

fullpage.js horizontal-scrolling html javascript