Как сделать поэкранный скролл с переходом в обычный?

Question

[Андрей Иванов]

Подскажите, пожалуйста, как можно сделать поэкранный скролл с переходом в обычный?
Кратко: в начале будут расположены 3 баннера, которые нужно будет пролистывать целиком (поэкранно), а после последнего будет идти каталог, где нужен уже обычный скролл, а не экрана целиком. А при пролистывании к началу страницы, нужен обратный порядок.
Приложу схему для наглядности:


Попробовал использовать плагин fullpage.js с опцией scrollOverflow: true, но там какой-то топорный скролл, а не плавный.

Может есть еще какие-то аналоги или кто-нибудь может поделиться опытом/наработками подобного функционала ? Или же можно сделать плавный скролл в fullpage.js ?

Comments

[Adik Izat]

Не проще ли поставить обычный слайдер а за ним контент?

[Андрей Иванов]

Adik Izat, Нет, к сожалению, нужно именно переключение целого экрана

[Adik Izat]

Андрей Иванов, а создание иллюзии полноэранной прокрутки не сойдет?

[Андрей Иванов]

Adik Izat, Не уверен, что это будет выглядеть так, как нужно заказчику. Вы предлагаете просто в начале поставить слайдер с пролистыванием на колесо мыши, а при пролистывании последнего слайда листнуть страницу к контенту ?

[Adik Izat]

Андрей Иванов, да

Answer 1

[Андрей Иванов]

Решил с помощью методов и коллбэков fullpage.js.:

Отлавливаем событие onLeave, как одну из опций, в нем условие:

onLeave: function(origin, destination, direction){
	if (origin.index == 2 && direction =='down') {
		fullpage_api.setAutoScrolling(false);
	} else {
		fullpage_api.setAutoScrolling(true);
	}
}

Получается следующее: Если долистали до 3 слайда и идвижение скролла вниз, методом setAutoScrolling(false) отключаем поэкранный скролл и ставим пролистывание страницы как обычно. Иначе - наоборот.

UPD: Т.к. многие пишут в ЛС по поводу решения, добавляю еще 1 вариант, который в итоге я использовал:

new fullpage('#fullpage', {
  licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
  scrollBar: true,
  fitToSection: true,
  fitToSectionDelay: 300,
  verticalCentered: true,
  normalScrollElements: '.main-container' //Контейнер с обычным скроллом
});

Comments

[nvdfxx]

У fullpage прям свойство есть в доках специально для этого, scrollable называется

Answer 2

[Арсений Матыцин]

Вариантов решения на самом деле несколько и одно круче другого.
1. Убираешь скролл у родителя и листаешь элементы со 100vh (все 4 по примеру) и у последнего «контента» должен быть включен вертикальный скролл при переполнении контента.
2. Создаешь элемент в момент прокрутки к нему (либо c меняешь display:none), тогда у родителя не будет жесткого правила обрезки (хотя до момента смены 3 слайда и освного контента я все же бы рекомендовал включить, чтобы скрол не прыгал).

И вишенка на торте: а нахрена? Отвечать не обязательно.

Comments

[Андрей Иванов]

Спасибо за предложенные варианты, но решил с помощью методов и коллбэков fullpage.js.

И вишенка на торте: а нахрена?
Такой дизайн был нарисован для заказчика

Answer 3

[Дмитрий Хватов]

Установи к последнему элементу overflow-y:scroll; в css . И почитай про свойство overflow

Comments

[Андрей Иванов]

Это не вариант решения. Про overflow я все прекрасно знаю, спасибо

[Дмитрий Хватов]

Андрей Иванов, а что не так ?