Управление автоскроллом в fullpage.js

120
11 сентября 2019, 00:40

У меня проблема с плагином fullpage.js. Документация

  1. На странице есть 4 секции (+ футер, который не включен в fullpage.js). Три секции одинаковые, а четвертая длинная и имеет класс fp-auto-height.
  2. Три секции должны иметь autoScrolling: true, а четвертая false. Я прописал в normalScrollElements четвертую секцию, но плагин все равно делает автоскролл для всех.
  3. Основная проблема в том, что когда мы доходим до самого низа страницы и делаем один скролл вверх, то происходит скачок к началу последнего слайда.

Я пытался это решить с помощью метода fullpage_api.setAutoScrolling(). Колбеки onLeave и afterSlideLoad. Логика такая:

  1. При покидании раздела и при окончании прокрутки раздела проверяем на каком разделе находимся и в зависимости от этого делаем setAutoScrolling true или false.
  2. Чтобы избежать резкого переключения автоскроллинга у разделов запрещаем переход с помощью return: false (не уверен, что я правильно это использую). Пробовал ставить таймаут на включение/отключение скролла, но это не помогло.

При текущей конфигурации получается, что до конца страницы скроллинг работает как надо: до последней секции автоскроллинг, а на последней обычный скролл, но при попытке проскроллить вверх всё пролетает в начало последнего слайда.

P.S. Опция scrollOverflow:true не подходит, так как она создает в слайде внутренний контейнер, и это реализация не очень корректна для данного случая.

new fullpage('#fullpage', {
    hybrid: true,
    autoScrolling: true,
    menu: '#menu',
    scrollingSpeed: 1200,
    normalScrollElements: '.section-4',
    normalScrollElementTouchThreshold: 1,
    bigSectionsDestination: null,
    animateAnchor: false,
    anchors: ['section-1', 'section-2', 'section-3', 'section-4'],
    onLeave: function(origin, destination, direction) {
       if (origin.index == 3 && direction == 'up') {
          fullpage_api.setAutoScrolling(true);
          return false;
       }
       else if (origin.index == 3 && destination.index != 4) {
        fullpage_api.setAutoScrolling(true);
        return true;
       }
   },
   afterSlideLoad: function(origin, destination, direction){
        if (origin.index == 3 && direction == 'up') {
          fullpage_api.setAutoScrolling(false);
          return false;
        }
   }
});

Первоначальный вариант (только onLeave). Не приводит к отбрасыванию в начало раздела. В таком варианте если проскролить много раз, то происходит мерцание верхушки последнего раздела (fullpage не может решить перейти или не перейти на слайд и катается туда-сюда, прежде чем сможет оцентрировать последний слайд).

Демонстрация, что происходит, если делать несколько резких скроллов: переход на слайд

    onLeave: function(origin, destination, direction){
               if(origin.index == 3 || destination.index == 3) {
                   fullpage_api.setAutoScrolling(false);
               }
               else {
                    fullpage_api.setAutoScrolling(true);
               }
    }
READ ALSO
Рекурсивная процедура

Рекурсивная процедура

По сути мне нужна была рекурсивная функция, но я прочитал что функции в mysql не могут быть рекурсивными, так что сделал процедуруТолько она...

132
Использование partition pruning на реплике в формате binlog_format = ROW

Использование partition pruning на реплике в формате binlog_format = ROW

Всем приветКто-нибудь может подсказать, будет ли использоваться оптимизация partition pruning на реплике, если запрос прилетел в ROW формате?

109
Весьма сложный запрос MySQL

Весьма сложный запрос MySQL

Вообщем поскольку я не особо силён в сложных запросах sql нужна ваша помощьЕсть 3 таблицы выглядят так:

136
Как восстановить работу цикла

Как восстановить работу цикла

Подскажите как мне починить цикл? Моя программа работала в консоли, принимала значение и отправляла в бд

132