URL скопирован в буфер обмена!
Как сделать горизонтальный скролл со стрелками на Zero Block?
С помощью этой модификации можно сделать горизонтальную прокрутку Zero Block при помощи стрелок навигации или курсора мыши
Модификация работает с включенным Autoscale в блоках
Модификация обновлена. Добавлено автоматическое выравнивание подложки скролла. Больше не нужно добавлять прозрачный элемент справа внутри блока с контентом. Расстояние справа теперь всегда будет такое как и слева
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
id Zero block с контентом
id блока со стрелками
Показывать курсор(Grab) в блоке скрола?
Скролл курсором
Возврат скрола при финише
Настройки дистанции скрола на различных экранах
Дистанция (экран 1200+)
Дистанция(экран до 1200)
Дистанция (экран до 960)
Дистанция (экран до 640)
Дистанция (экран до 480)
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD016--><script src='https://cdn.jsdelivr.net/npm/[email protected]/dragscroll.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var TCDscroling = $('#rec645419189'),
TCDartboardscroll = TCDscroling.find('.t396__artboard'),
TCDAdrrow = $('#rec645419188'),
isScrolling = false,
isAtEnd = false;
TCDartboardscroll.addClass('dragscroll');
function TiCodeScrollDistance() {
var w = $(window).width();
return w > 1200 ? 300 : w > 960 ? 200 : w > 640 ? 200 : w > 480 ? 100 : 300;
}
TCDAdrrow.find('.ti-arrow-left').on('click', function () {
if (isScrolling) return;
isScrolling = true;
var distance = TiCodeScrollDistance();
var container = $(this).closest('#rec645419188')
.siblings('#rec645419189')
.find('.t396__artboard');
container.animate({ scrollLeft: container.scrollLeft() - distance }, 500, function() {
isScrolling = false;
isAtEnd = false;
});
});
TCDAdrrow.find('.ti-arrow-right').on('click', function () {
if (isScrolling) return;
isScrolling = true;
var distance = TiCodeScrollDistance();
var container = $(this).closest('#rec645419188')
.siblings('#rec645419189')
.find('.t396__artboard');
if (isAtEnd) {
container.animate({ scrollLeft: 0 }, 500, function() {
isAtEnd = false;
isScrolling = false;
});
} else {
container.animate({ scrollLeft: container.scrollLeft() + distance }, 500, function () {
if (container.scrollLeft() >= container[0].scrollWidth - container.width()) {
isAtEnd = false;
}
isScrolling = false;
});
}
});
var TCDartboardscroll = $('#rec499165315 .t396__artboard');
TCDartboardscroll.on('mousedown', function () {
TCDartboardscroll.addClass('disable-scrolling');
});
$(document).on('mouseup', function () {
TCDartboardscroll.removeClass('disable-scrolling');
});
var checkInterval = setInterval(function () {
var container = TCDscroling[0];
if (!container) return;
var elements = container.querySelectorAll('.tn-elem');
if (!elements.length) return;
clearInterval(checkInterval);
var leftElem = elements[0],
rightElem = elements[0],
leftmost = leftElem.getBoundingClientRect().left,
rightmost = leftElem.getBoundingClientRect().right;
elements.forEach(function (el) {
var rect = el.getBoundingClientRect();
if (rect.left < leftmost) {
leftElem = el;
leftmost = rect.left;
}
if (rect.right > rightmost) {
rightElem = el;
rightmost = rect.right;
}
});
var leftDistance = leftElem.getBoundingClientRect().left;
var containerRect = container.getBoundingClientRect();
var rightOffset = rightElem.getBoundingClientRect().right - containerRect.left;
var overlay = document.createElement('div');
overlay.style.position = 'absolute';
overlay.style.top = '0';
overlay.style.left = rightOffset + 'px';
overlay.style.width = leftDistance + 'px';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.0)';
overlay.style.pointerEvents = 'none';
container.querySelector('.t396__artboard').appendChild(overlay);
}, 1000);
});
</script>
<style>
.ti-arrow-right, .ti-arrow-left {
cursor: pointer;
}
#rec645419189 .t396__artboard::-webkit-scrollbar {
display: none;
}
#rec645419189 .t396__artboard {
overflow-x: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
@media (min-width: 320px) {
.dragscroll {
cursor: -webkit-grab;
cursor: grab;
transition: all 0.7s ease;
}
.dragscroll:active {
cursor: -webkit-grabbing;
cursor: grabbing;
}
}
.disable-scrolling::-webkit-scrollbar {
display: none;
}
</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. Создаем второй Zero Block в котором размещаем две кнопки со стрелками(это может быть кнопка, текст, шейп или изображение). Стрелкам назначаем классы ti-arrow-left (для прокрутки влево) и ti-arrow-right (для прокрутки вправо)
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
4. Копируем id Zero Block с контентом и id блока со стрелками и вставляем их в генератор кода;
5. При необходимости указываем в генераторе дополнительные настройки:
Показывать курсор(Grab) в блоке скрола? - возможность включить курсор в виде руки при наведении на блок скролла. Можно выбрать экраны на которых показывать курсор;
Скролл курсором - можно включить или выключить прокрутку блока курсором;
Возврат скролла при финише - если включено, то будет возвращать блок в самое начало если тот был уже доскролен.
6. Копируем готовый код и вставляем его в HTML блок T123. Блок кода размещаем под зеро блоками.
Примечание: Скрипт автоматически находит самый крайний элемент слева, меряет расстояние и добавляет такое же расстояние к самому правому элементу чтобы блок скролла был ровный. Прозрачные шейпы добавлять справа не нужно.
2. Размещаем в блоке весь необходимый контент(все что выходит горизонтально за пределы сетки тильда будет скролиться). Важно! контент не должен выходить за пределы горизонтальной линии подложки так как тогда включится вертикальная прокрутка.
3. Создаем второй Zero Block в котором размещаем две кнопки со стрелками(это может быть кнопка, текст, шейп или изображение). Стрелкам назначаем классы ti-arrow-left (для прокрутки влево) и ti-arrow-right (для прокрутки вправо)
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
4. Копируем id Zero Block с контентом и id блока со стрелками и вставляем их в генератор кода;
5. При необходимости указываем в генераторе дополнительные настройки:
Показывать курсор(Grab) в блоке скрола? - возможность включить курсор в виде руки при наведении на блок скролла. Можно выбрать экраны на которых показывать курсор;
Скролл курсором - можно включить или выключить прокрутку блока курсором;
Возврат скролла при финише - если включено, то будет возвращать блок в самое начало если тот был уже доскролен.
6. Копируем готовый код и вставляем его в HTML блок T123. Блок кода размещаем под зеро блоками.
Примечание: Скрипт автоматически находит самый крайний элемент слева, меряет расстояние и добавляет такое же расстояние к самому правому элементу чтобы блок скролла был ровный. Прозрачные шейпы добавлять справа не нужно.
>
<
