dv1zhok
@dv1zhok
Freelancer

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

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

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

Может есть еще какие-то аналоги или кто-нибудь может поделиться опытом/наработками подобного функционала ? Или же можно сделать плавный скролл в fullpage.js ?
  • Вопрос задан
  • 182 просмотра
Решения вопроса 1
dv1zhok
@dv1zhok Автор вопроса
Freelancer
Решил с помощью методов и коллбэков 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) отключаем поэкранный скролл и ставим пролистывание страницы как обычно. Иначе - наоборот.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
ArsenyMatytsyn
@ArsenyMatytsyn
CEO iAmStudio, предприниматель.
Вариантов решения на самом деле несколько и одно круче другого.
1. Убираешь скролл у родителя и листаешь элементы со 100vh (все 4 по примеру) и у последнего «контента» должен быть включен вертикальный скролл при переполнении контента.
2. Создаешь элемент в момент прокрутки к нему (либо c меняешь display:none), тогда у родителя не будет жесткого правила обрезки (хотя до момента смены 3 слайда и освного контента я все же бы рекомендовал включить, чтобы скрол не прыгал).

И вишенка на торте: а нахрена? Отвечать не обязательно.
Ответ написан
Dimarik9
@Dimarik9
Веб дизайнер
Установи к последнему элементу overflow-y:scroll; в css . И почитай про свойство overflow
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы