Как прокручивать нормально (без прилипаний) в определенном разделе в FullPage.js?

Содержание

Вопрос или проблема
Ответ или решение
Шаг 1: Настройки FullPage.js
Шаг 2: Правильные CSS стили
Шаг 3: Инициализация FullPage.js
Пример HTML структуры
Итог

Вопрос или проблема

Я пытаюсь создать веб-сайт, где я могу использовать прокрутку с зацеплением для первых двух секций, а затем прокручивать нормально через длинную секцию (300vh).

Как я могу достичь этого эффекта? Я не нашел ни одного места, которое правильно объясняет это, поэтому мне нужна помощь.

Я пытался использовать scrollOverflow: true;, как упоминается в документации FullPage.js, но прокрутка работает некорректно. Она либо застревает на длинной секции, либо вообще не прокручивается внутри этой секции.

Вот что я попробовал:

document.querySelectorAll('[tabindex]').forEach(function(el) {
  el.removeAttribute('tabindex');
});

body {
  background-color: rgb(39, 39, 39);
  overflow-x: hidden;
}

section {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-section {
  background-color: rgb(156, 76, 76);
}

.features-benefits-section {
  background-color: rgb(163, 2, 2);
}

.spacer,
.overflowContainer {
  overscroll-behavior: contain;
  overflow-x: hidden;
  height: 100vw;
  width: 100vw;
}

#scrolling {
  background-color: rgb(162, 134, 134);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300vh;
  width: 100vw;
}

h1 {
  color: aliceblue;
  font-size: 5rem;
}

new fullpage("#fullpage", {
  autoScrolling: true, scrollHorizontally: true, normalScrollElements:'.scrolling', scrollOverflow:true
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>debag</title>
  <link rel="stylesheet" href="https://stackoverflow.com/questions/79031724/style.css">
  <script src="script.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.29/fullpage.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script>
</head>

<body>
  <div id="fullpage">
    <section class="section hero-section">
      <h1>геройская секция</h1>
    </section>
    <section class="section features-benefits-section">
      <h1>секция особенностей и преимуществ</h1>
    </section>
    <section class="section spacer">
      <div class="overflowContainer">
        <div id="scrolling">
          <h1>прокрутка</h1>
        </div>
      </div>
    </section>
    <section class="section">
    </section>
  </div>
</body>

</html>

Ответ или решение

Чтобы реализовать нормальную прокрутку (без фиксированной прокрутки, типа snap) для определенного раздела в FullPage.js, вы можете воспользоваться функцией normalScrollElements и правильно настроить параметры стилей. Вот полное решение вашей задачи:

Шаг 1: Настройки FullPage.js

В вашем коде, вы уже используете normalScrollElements. Давайте убедимся, что у вас правильно прописаны все параметры и активированы необходимые стили.

Шаг 2: Правильные CSS стили

Убедитесь, что у элементов с классом, который вы указываете в normalScrollElements, есть соответствующие стили для нормальной прокрутки, например, overflow: auto. Вот как можно его настроить:

body {
  background-color: rgb(39, 39, 39);
  overflow-x: hidden;
}

section {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-section {
  background-color: rgb(156, 76, 76);
}

.features-benefits-section {
  background-color: rgb(163, 2, 2);
}

.spacer {
  overflow: auto; /* Позволяет нормальную прокрутку */
  height: 100vh; /* Задать высоту соответствующим образом */
  width: 100vw;
}

#scrolling {
  background-color: rgb(162, 134, 134);
  display: flex;
  flex-direction: column; /* Чтобы элементы могли располагаться один под другим */
  justify-content: center;
  align-items: center;
  height: 300vh; /* Ваша длинная секция */
  width: 100vw;
}

h1 {
  color: aliceblue;
  font-size: 5rem;
}

Шаг 3: Инициализация FullPage.js

Ваш JavaScript код для инициализации FullPage.js будет выглядеть следующим образом:

new fullpage('#fullpage', {
  autoScrolling: true,
  scrollHorizontally: true,
  normalScrollElements: '.spacer', // Указание области для нормальной прокрутки
  scrollOverflow: true // Возможно, это может быть необходимо для некоторых других элементов
});

Пример HTML структуры

Ваш HTML код будет выглядеть следующим образом:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Прокрутка в FullPage.js</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.29/fullpage.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.29/fullpage.min.js" defer></script>
</head>
<body>
  <div id="fullpage">
    <section class="section hero-section">
      <h1>Герой секция</h1>
    </section>
    <section class="section features-benefits-section">
      <h1>Секция преимуществ</h1>
    </section>
    <section class="section spacer">
      <div id="scrolling">
        <h1>Скроллинг</h1>
        <!-- Добавьте больше контента здесь для проверки прокрутки -->
      </div>
    </section>
    <section class="section">
      <h1>Последняя секция</h1>
    </section>
  </div>
  <script>
    new fullpage('#fullpage', {
      autoScrolling: true,
      scrollHorizontally: true,
      normalScrollElements: '.spacer',
      scrollOverflow: true
    });
  </script>
</body>
</html>

Итог

Теперь, при прокрутке на секции с классом spacer, вы сможете прокручивать контент нормально, в то время как остальные секции будут вести себя так, как и предполагалось, с помощью snap-подхода. Убедитесь, что у вас достаточно контента внутри .scrolling, чтобы протестировать прокрутку.

Если у вас возникнут дальнейшие проблемы, проверьте консоль браузера на наличие ошибок или конфликтов с другими библиотеками.