URL скопирован в буфер обмена!
Как сделать горозонтальный скролл в Zero Block на Tilda?
С помощью этой модификации можно сделать горизонтальную прокрутку зеро блока на Тильда. Скрипт автоматически добавит расстояние справа от контента чтобы при скролле контент был в разметке Тильда.
Модификация работает с включенным Autoscale в блоках
Модификация обновлена. Появился автоматический режим фиксирования длины скролла.
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
id Zero block
Курсор(Grab)
Длина скролла
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD014--><script src='https://cdn.jsdelivr.net/npm/dragscroll@0.0.8/dragscroll.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var ticodescroll = $('#rec493782123');
ticodescroll.find('.t396__artboard').addClass('dragscroll');
setTimeout(function () {
var Ticodegridshape = ticodescroll[0];
var TCDelem = Ticodegridshape.querySelectorAll('.tn-elem');
if (!TCDelem.length) return;
var leftticodeElement = TCDelem[0];
var rightticodeElement = TCDelem[0];
var leftmostPosition = leftticodeElement.getBoundingClientRect().left;
var rightticodePosition = leftticodeElement.getBoundingClientRect().right;
TCDelem.forEach(function (elem) {
var rect = elem.getBoundingClientRect();
if (rect.left < leftmostPosition) {
leftticodeElement = elem;
leftmostPosition = rect.left;
}
if (rect.right > rightticodePosition) {
rightticodeElement = elem;
rightticodePosition = rect.right;
}
});
var TCDdistanceLeft = leftticodeElement.getBoundingClientRect().left;
var TCDcontainerRect = Ticodegridshape.getBoundingClientRect();
var TCDrightfset = rightticodeElement.getBoundingClientRect().right - TCDcontainerRect.left;
var TCDShapes = document.createElement('div');
TCDShapes.style.position = 'absolute';
TCDShapes.style.top = '0';
TCDShapes.style.left = `${TCDrightfset}px`;
TCDShapes.style.width = `${TCDdistanceLeft}px`;
TCDShapes.style.height = '100%';
TCDShapes.style.backgroundColor = 'rgba(0, 0, 0, 0.0)';
TCDShapes.style.pointerEvents = 'none';
Ticodegridshape.querySelector('.t396__artboard').appendChild(TCDShapes);
}, 1000);
});
</script>
<style> #rec493782123 .dragscroll::-webkit-scrollbar { display: none; } @media (min-width: 320px) { #rec493782123 .dragscroll { cursor: -webkit-grab; cursor: grab; transition: all 0.7s ease; } #rec493782123 .dragscroll:active { cursor: -webkit-grabbing; cursor: grabbing; } } </style>
<script> (function updateRecordType() { const scriptElement = document.currentScript; if (scriptElement) { const recordElement = scriptElement.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем Zero Block и настройках блока выставляем параметр Owerflow в режим Auto;
2. Размещаем в блоке весь необходимый контент(все что выходит горизонтально за пределы сетки тильда будет скролиться). Важно чтобы контент не выходил за рамки блока по вертикали так как тогда включиться вертикальный скролл;
3. Копируем id Zero Block и вставляем в генератор кода;
4. Указываем дополнительные настройки в генераторе;
Курсор(Grab) - выбираем на каких экранах адаптации нужно показывать курсор grab вместо стрелки;
Длина скролла - при автоматическом режиме скрипт автоматически рассчитает расстояние от самого левого элемента в блоке к краю экрана и добавит такое же расстояние к самому правому. Скролл закончится когда последний правый элемент войдет в разметку Тильды
В ручном режиме скролл закончится как только последний правый элемент в блоке полностью войдет в зону видимости(тоесть между контентом и правой частью экрана не будет отступа). Для регулировки длины в этом режиме, вы можете добавлять прозрачный шейп после последнего правого контента в блоке, чтобы длина скролла заканчивалась на нем.
5. Копируем готовый код и вставляем в HTML блок T123;
Если в горизонтальном скролле требуется добавить стрелки, вы можете воспользоваться модификацией "Горизонтальный скролл с пользовательскими стрелками"
2. Размещаем в блоке весь необходимый контент(все что выходит горизонтально за пределы сетки тильда будет скролиться). Важно чтобы контент не выходил за рамки блока по вертикали так как тогда включиться вертикальный скролл;
3. Копируем id Zero Block и вставляем в генератор кода;
4. Указываем дополнительные настройки в генераторе;
Курсор(Grab) - выбираем на каких экранах адаптации нужно показывать курсор grab вместо стрелки;
Длина скролла - при автоматическом режиме скрипт автоматически рассчитает расстояние от самого левого элемента в блоке к краю экрана и добавит такое же расстояние к самому правому. Скролл закончится когда последний правый элемент войдет в разметку Тильды
В ручном режиме скролл закончится как только последний правый элемент в блоке полностью войдет в зону видимости(тоесть между контентом и правой частью экрана не будет отступа). Для регулировки длины в этом режиме, вы можете добавлять прозрачный шейп после последнего правого контента в блоке, чтобы длина скролла заканчивалась на нем.
5. Копируем готовый код и вставляем в HTML блок T123;
Если в горизонтальном скролле требуется добавить стрелки, вы можете воспользоваться модификацией "Горизонтальный скролл с пользовательскими стрелками"
