Порог чувствительности прокрутки

В библиотеке fullPage.js прокрутка между секциями осуществляется с использованием событий колесика мыши, тач-событий и клавиш навигации. Порог чувствительности прокрутки определяет, насколько сильным или резким должно быть движение пользователя, чтобы инициировать переход на следующую или предыдущую секцию. Управление этим параметром особенно важно для плавного пользовательского опыта и предотвращения случайных срабатываний.

Настройка touchSensitivity

Параметр touchSensitivity отвечает за чувствительность сенсорного управления на мобильных устройствах и тачпадах. Он определяет, какое минимальное движение пальца требуется для переключения между секциями.

new fullpage('#fullpage', {
    touchSensitivity: 15, // значение по умолчанию 5-15
});

Особенности:

  • Чем выше значение, тем сильнее нужно двигать пальцем для смены секции.
  • Низкие значения делают прокрутку более «лёгкой», секции переключаются при малейшем движении.
  • Используется только при тач-событиях, не влияет на колесико мыши.

Настройка normalScrollElements и её связь с порогом

Существует сценарий, когда в секции есть внутренние скролл-блоки. Для этих блоков можно отключить fullPage-прокрутку, чтобы не происходило случайного перелистывания.

new fullpage('#fullpage', {
    normalScrollElements: '.scrollable-div',
});
  • Если пользователь скроллит .scrollable-div, fullPage.js не реагирует на прокрутку.
  • Внутри таких элементов чувствительность тач-событий не применяется.

Настройка scrollBar и порог прокрутки

Если активирован параметр scrollBar: true, fullPage.js использует стандартный браузерный скролл, а порог чувствительности определяется не библиотекой, а системными событиями прокрутки. В этом режиме:

  • Параметр touchSensitivity не влияет на прокрутку.
  • Для тонкой настройки поведения приходится использовать CSS и нативные события wheel или touchmove.

Порог колесика мыши: bigSectionsDestination

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

new fullpage('#fullpage', {
    bigSectionsDestination: 'top', // значения: 'top', 'bottom', 'next', 'prev'
});
  • 'top' – переход к верхней границе текущей секции.
  • 'bottom' – переход к нижней границе.
  • 'next' и 'prev' – перелистывание по секциям с учетом текущего направления скролла.
  • В комбинации с scrollingSpeed позволяет создавать «тяжёлую» или «лёгкую» прокрутку.

Параметр scrollingSpeed и его влияние на восприятие порога

Хотя scrollingSpeed не напрямую меняет порог чувствительности, он сильно влияет на ощущение прокрутки:

new fullpage('#fullpage', {
    scrollingSpeed: 700, // значение в миллисекундах
});
  • Более высокие значения делают переход между секциями медленным, создавая ощущение высокой «пороговой» прокрутки.
  • Малые значения создают быстрый перелёт, что особенно заметно при низких значениях touchSensitivity.

Практическая настройка порога чувствительности

Оптимальные значения зависят от типа контента и устройства:

  • Для мобильных устройств: touchSensitivity = 7–15, scrollingSpeed = 500–800 мс.
  • Для десктопа с колесиком мыши: bigSectionsDestination = 'next' или 'prev', scrollingSpeed = 500–700 мс.
  • С внутренними скролл-блоками: обязательно использовать normalScrollElements для предотвращения случайного перелистывания.

Взаимодействие с событиями

Полезно отслеживать события fullPage.js, чтобы тонко настраивать поведение:

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
        console.log('Перешли в секцию:', destination.index);
    },
    onLeave: function(origin, destination, direction){
        console.log('Покидаем секцию:', origin.index);
    }
});
  • Эти события позволяют динамически менять параметры или блокировать прокрутку в зависимости от контента.
  • Можно создавать адаптивные пороги чувствительности для разных секций.

Итоговые рекомендации по порогу чувствительности

  1. Использовать touchSensitivity для тач-устройств.
  2. Настраивать bigSectionsDestination для колесика мыши.
  3. Корректировать scrollingSpeed для ощущения «тяжести» или «лёгкости» перелистывания.
  4. Применять normalScrollElements для внутренних скролл-блоков.
  5. Отслеживать события afterLoad и onLeave для динамического контроля.

Эти параметры в совокупности позволяют создать плавную, интуитивную прокрутку с контролируемым порогом чувствительности на всех устройствах.

Оглавление