Кейсы
Кейсы
Обо мне
Обо мне
Услуги
Услуги
Блог
Блог
Кейсы
Кейсы
Обо мне
Обо мне
Услуги
Услуги
Блог
Блог

Заказать проект

Заполните данные и я свяжусь с Вами, для детального обсуждения.
Любой сайт использует файлы cookie
ОК, буду знать

Как сделать горизонтальный скролл в зеро блоке?

Скрипт ниже позволит сделать простой и удобный скролл в Zero block со стрелками и прокруткой мыши. Пример работы скрипта внизу cтраницы.
Анимированные svg для подсказки скролла:

Бонус

1
Для зероблока, который необходимо горизонтально прокручивать назначить класс uc-horizontal
2
Для зероблока со стрелками назначить класс uc-arrow, для левой кнопки прокрутки arrow-l, для правой arrow-r
3
Скопировать весь код ниже и вставить его в блок HTML-код T123

Инструкция

<!--Скрипты для 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>

Пример