<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/scrollbooster@3/dist/scrollbooster.min.js" defer></script>

<script>
$(function() {

    // Укажи ID Zero блока со скроллом и включи overflow: auto
    var blockScrollId = '.uc-elements-video';

    // Укажи ID Zero блока со стрелками и добавь каждой класс arrow-left или arrow-right
    var blockArrowsId = '.uc-sticks-video';

    var shiftSize = 320; // По умолчанию величина сдвига

    $(window).on('load resize', function(){
        if (window.matchMedia('(max-width: 480px)').matches) {
            shiftSize = 320; // Величина сдвига для 320-480px
        } else if (window.matchMedia('(max-width: 640px)').matches) {
            shiftSize = 320; // Величина сдвига для 481-640px
        } else if (window.matchMedia('(max-width: 960px)').matches) {
            shiftSize = 320; // Величина сдвига для 641-960px
        } else if (window.matchMedia('(max-width: 1200px)').matches) {
            shiftSize = 320; // Величина сдвига для 961-1200px
        } else {
            shiftSize = 320; // Величина сдвига для >1200px
        }
    });

    // Подготовка DOM для ScrollBooster
    $(blockScrollId + ' .t396__artboard').addClass('scrollbooster-viewport').wrapInner('<div class="scrollbooster-content"></div>');
    $(blockScrollId + ' .t396').css('overflow', 'hidden');

    // Инициализация ScrollBooster
    new ScrollBooster({
        viewport: $(blockScrollId + ' .scrollbooster-viewport')[0],
        content: $(blockScrollId + ' .scrollbooster-content')[0],
        scrollMode: 'native',
        pointerMode: 'mouse',
        bounce: false,
        onPointerDown: function() { $(blockScrollId + ' *:focus').blur(); }
    });

    // Обработка кликов на стрелки
    $(blockArrowsId + ' .arrow-left').on('click', function(e) {
        e.preventDefault();
        $(blockScrollId + ' .t396__artboard').animate({ scrollLeft: '-=' + shiftSize }, 300);
    });

    $(blockArrowsId + ' .arrow-right').on('click', function(e) {
        e.preventDefault();
        $(blockScrollId + ' .t396__artboard').animate({ scrollLeft: '+=' + shiftSize }, 300);
    });
});
</script>

<style>
.scrollbooster-viewport {
    cursor: grab;
    padding-bottom: 30px;
    margin-bottom: -30px;
    overflow: hidden; /* Убедитесь, что лишний контент скрыт */
}
.scrollbooster-viewport:active {
    cursor: grabbing;
}
.scrollbooster-content {
    position: absolute;
    width: 2000px; /* Ширина контента для теста */
    height: 100%; /* Должна быть пропорциональна контенту */
}
.arrow-left,
.arrow-right {
    cursor: pointer;
}
</style>