<!--Скрипты для Tilda dessup.ru--><!--Горизонтальный скролл для зероблока https://dessup.ru/blog/professional-blog/tilda-horizontal-scroll-->
<style>
.uc-horizontal .t396__artboard {overflow-x: auto; scroll-behavior: smooth;}
/* Скрыть скроллбар */
.uc-horizontal .t396__artboard::-webkit-scrollbar {height: 0 !important;}
</style>
<script>
// https://dessup.ru/blog/professional-blog/tilda-horizontal-scroll
function smoothScroll(scrollTo, duration) {
const start = scrollContainer.scrollLeft;
const change = scrollTo - start;
const increment = 20;
let currentTime = 0;
function animateScroll() {
currentTime += increment;
const val = Math.easeInOutQuad(currentTime, start, change, duration);
scrollContainer.scrollLeft = val;
if (currentTime < duration) {
requestAnimationFrame(animateScroll);};};
animateScroll();};
//class блока со скролом
document.addEventListener('DOMContentLoaded', function() {
const scrollContainer = document.querySelector('.uc-horizontal .t396__artboard');
//class блока со стрелками
const arrowLeft = document.querySelector('.uc-arrow .arrow-l');
const arrowRight = document.querySelector('.uc-arrow .arrow-r');
//прокрутка влево
arrowLeft.addEventListener('click', function() {
scrollContainer.scrollLeft -= 500; //прокрутка влево в пикселях
});
//прокрутка вправо
arrowRight.addEventListener('click', function() {
scrollContainer.scrollLeft += 500; //прокрутка влево в пикселях
});});
//прокрутка мышкой
document.addEventListener('DOMContentLoaded', function () {
let pos = { top: 0, left: 0, x: 0, y: 0 };
//class блока со скролом
let blocks = ['.uc-horizontal'];
blocks.forEach((elem) => {
elem = document.querySelector(elem + " .t396__artboard");
if (elem.querySelector("img") !== null) {
elem.querySelector("img").ondragstart = function() { return false; };};
elem.style.overflowX = 'auto';
elem.style.overflowY = 'hidden';
elem.querySelector('.t396__carrier').style.position = 'sticky';
elem.style.cursor = 'grab';
const mouseDownHandler = function (e) {
elem.style.cursor = 'grabbing';
elem.style.userSelect = 'none';
pos = {
left: elem.scrollLeft,
x: e.clientX,};
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);};
const mouseMoveHandler = function (e) {
const dx = e.clientX - pos.x;
elem.scrollLeft = pos.left - dx;};
const mouseUpHandler = function () {
elem.style.cursor = 'grab';
elem.style.removeProperty('user-select');
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);};
elem.addEventListener('mousedown', mouseDownHandler);});});
//Горизонтальный скролл для зероблока https://dessup.ru/blog/professional-blog/tilda-horizontal-scroll
</script>