Смешанный скролл

1) Создаем два зеро блока. Один будет в начале страницы, второй в конце. Они нужны исключительно в технических целях. Контент на этих экранах быть не должен и лучше поставить им задний фон как на остальном сайте.

2) Создаем блоки, которые мы будем использовать.

3) Добавляем в конце страницы блок Другое -> T123 HTML-код и вставляем в него код, который находится ниже.

4) В коде есть несколько отметок, где нужно ввести данные своих блоков или настройки для скролла. Они выглядят вот так:
/*************************************************/
/*******************Часть 1**********************/
/*************************************************/

4.1) В части 1 нам нужно указать id первого технического блока, всех блоков, которые находятся вне горизонтального скролла и последнего технического блока.
var sections = $("#rec109090577, #rec109090584");

4.2) И id всех блоков, которые нужны для горизонтальный секций. Обратите внимание, если у вас одна горизонтальная секция, тогда вам нужно просто написать в таком формате "#rec109090579, #rec109090580, #rec109090581". Если же у вас несколько горизонтальных секций, тогда вам нужно указывать как в первом варианте, но через запятую. В примере ниже показан вариант с двумя горизонтальными секциями. Обратите внимание на кавычки и запятую после третьего блока, это означает что закончилась одна секция и началась другая.
var sliders = ["#rec109090579, #rec109090580, #rec109090581", "#rec109090579, #rec109090580"];

5) Если у вас на сайте внизу есть плашка Made On Tilda, в части 2 нужно добавить этот код. В противном случае, ваш аккаунт могут забанить.
setTimeout(function(){ if ($("div").last().parent().parent().parent().attr("id").length == 9) { $("div").last().parent().parent().parent().wrap("<div class='section fp-section'></div>").parent().appendTo("#fullpage").addClass("section") } }, 3000)

6) В части 3 можно указать дополнительные настройки:
// Скорость скролла
scrollingSpeed: 600,
// Анимация
// Можно заменить "easeInOutCubic" на любую другую анимацию. Список анимаций вы можете найти тут:
// https://easings.net/ru
easing: "easeInOutCubic",
// Управление клавиатурой
keyboardScrolling: true,
// Стрекли управления на горизонтальном скролле
controlArrows: true,
// Скролл с последнего экрана переводит на первый экран
loopBottom: true,
// Скролл с последнего экрана переводит на первый экран
loopTop: true,
// Якорные ссылки на страницу.
// Вы можете на любом экоране добавить кнопку, с ссылкой #nav/2, при нажатии на неё пользователь попадет на третий экран.
// Так-же, можно скопировать ссылку mysite.com/#nav/2 и при переходе на неё, пользователь попадет сразу на третий экран.
// Почему на четвертый экран?
// У первого экрана будет ссылка mysite.com/#nav
// У второго экрана будет ссылка mysite.com/#nav/1
// У третьего экрана будет ссылка mysite.com/#nav/2
// Так-же, вместо nav вы можете написать что-нибудь другое.
anchors:['', 'nav'], 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/vendors/jquery.easings.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js"></script>
<script>
function check_direction(t,e,i){var n=$($(".section").get(t-1)).find(".fp-slide").length,f=-1;if(n){if($($(".section").get(t-1)).find(".fp-slide").each(function(t,e){$(e).hasClass("active")&&(f=t+1)}),"down"==i&&f<n)return $.fn.fullpage.moveSlideRight(),!1;if("up"==i&&1<f)return $.fn.fullpage.moveSlideLeft(),!1}return("up"!=i||$($(".section").get(t-1)).prev().find(".t-rec").attr("id")!=$(".section").first().find(".t-rec").attr("id"))&&(("down"!=i||$($(".section").get(t-1)).next().find(".t-rec").attr("id")!=$(".section:not(.label)").last().find(".t-rec").attr("id"))&&void 0)}


$(document).ready(function() {
	/*************************************************/
	/*******************Часть 1***********************/
	/*************************************************/
	// Указываем простые секции
	var sections = $("#rec109985702, #rec109985750");
	// Указываем группы слайдов
	var sliders = ["#rec109985749, #rec109985703", "#rec109985704, #rec109985713", "#rec109985708, #rec109985710"];


	sections.wrap("<div class='section'></div>");
	sliders.forEach(function(s){
		let parents = $(s).wrap("<div class='slide'></div>");
		parents.parent().wrapAll("<div class='section'></div>");
	})
	$(".section").wrapAll("<div id='fullpage'></div>");

	/*********************************************/
	/*****************ЧАСТЬ 2*********************/
	/*********************************************/


	$($(".section").get(1)).addClass("active");
	window.page = $('#fullpage').fullpage({
		/*************************************************/
		/*******************Часть 3***********************/
		/*************************************************/
		// Скорость скролла
		scrollingSpeed: 300


		// Не трогать
		css3: true,
		scrollBar: true,
		onLeave: function(index, nextIndex, direction) {
			if (check_direction(index, nextIndex, direction) == false) {
				return false;
			}
			return true;
		},
	});
});
</script>

<style>
	body {
		overflow: hidden !important;
	}
</style>
Made on
Tilda