允许整页部分的水平滚动

Question

这是我的代码。

        <div class="pagecontent" id="fullpage" >

           

        <div class="fullscreensection section">

           
        </div>

        <div class="fullscreensection section">

         </div>
        <div class="fullscreensection section">

            
        </div>

     

      



        <div class="fullscreensection section">

            <div class="versepicture-center" style="background-image:linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)),url(/docs/thumbnails/Meditate-Morning-7.jpg);"></div>
            <p class="meditate-verse">But I will sing of your strength; I will sing aloud of your steadfast love in the morning. For you have been to me a fortress and a refuge in the day of <span class="nobreak">my distress. </span></p>
            <p class="meditate-ref">Psalm 59:16</p>
        </div>



    </div>

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

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

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

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

Answer 1

在使用 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- 在向上/向下调整大小的情况下，您可能需要销毁并初始化新的。

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