shap3n
@shap3n
ASP .NET Developer

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

Здравствуйте, может кто-нибудь сталкивался с подобным.
Есть случай когда нужно с первого блока, плавно проскролить до третьего, и вызов этого ивента должен происходить после начала скролинга из первого блока. Если простыми словами, как при скролинге не останавливаться на 2 блоке, чтоб он проскролися плавно сам?
Читал документацию, onLeave но не понимаю, дайте совет, пожалуйста.
  • Вопрос задан
  • 130 просмотров
Решения вопроса 1
@lolzqq
HTML,CSS,JS,PHP
Если вызывать какие-либо прокрутки слайдов/секций в событии onLeave - мы вызываем бесконечный цикл рекурсий (fullpage там что-то внутри себя бесконечно пытается сделать и не может выйти из цикла). Обходим это через глобальный флаг. В коде всё закомментировал, можете почитать-изучить

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="/fullpage/fullpage.css" />
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
	<script src="/fullpage/vendors/easings.min.js"></script>
	<script type="text/javascript" src="/fullpage/vendors/scrolloverflow.min.js"></script>
	<script type="text/javascript" src="/fullpage/fullpage.js"></script>
</head>
<body>
	<div id="fullpage">
	<div class="section" id="slide1">1</div>
	<div class="section" id="slide2">2</div>
	<div class="section" id="slide3">3</div>
	<div class="section" id="slide4">4</div>
	</div>

	<script>
	// этой переменной будем отмечать готовность fullpage крутить на третью секцию
	window.scrollto3=false; 
	// создаём таймер, который каждые 100мс будет отслеживать window.scrollto3==true;
	// который по-готовности делает прокрутку с первой секции сразу до третьей
	let timer=setInterval(function(){ 
		if(window.scrollto3==true){
			// пользуемся fullpage_api для прокрутки на нужную секцию
			fullpage_api.moveTo(3);
			// возвращаем маркер готовности прокрутки до третьей секции в исходное состояние
			window.scrollto3=false;
		}
	},100);
	
	$(document).ready(function(){
		$('#fullpage').fullpage({

				navigationPosition: 'left',
				navigation:true,
				navigationTooltips: ['Дальний', 'Ближний', 'Воздух', 'Земля'],
				showActiveTooltip: false,
				menu: '#menu',
				scrollingSpeed: 1000,

				onLeave: function(origin, destination, direction) {
							// если сейчас юзер пытается уйти вниз с 0-ой (первой) секции 
							if(origin.index == 0 && direction =='down'){
								// если пункт назначения - вторая секция
								if(destination.index == 1){
									// ставим маркер готовности к прокрутке до третьего слайда
									window.scrollto3=true;
									// запрещаем прокрутку до следующего слайда, которая делается по-умолчанию
									return false;
								}
							}
				}
		})
		
	})
	</script>
</body>
</html>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы