允許整頁部分的水平滾動

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. let options = { verticalCentered: true, // scrollHorizontally: 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 擴展。

這種其他結構將創建 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- 在向上/向下調整大小的情況下，您可能需要銷毀並初始化新的標記。

所以，就個人而言，我會避免這種情況，我會使用默認的響應模式來禁用移動設備上的快速滾動。