smooth-scroll-lenis.html

SmoothScroll для Тильды с помощью библиотеки Lenis

<!-- ********************************************************************** -->
<!-- SmoothScroll с помощью библиотеки Lenis (обновлено до версии 1.3.11+)  -->
<!-- ********************************************************************** -->
<!-- Более плавный скролл с поддержкой автоскейла                           -->
<!-- ********************************************************************** -->
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.11/dist/lenis.css">
<script src="https://unpkg.com/lenis@1.3.11/dist/lenis.min.js"></script>
<script>
// Классы Тильды, для которых скрипт "отключается"
const classesToExclude = [
    't706',
    't-feed__post-popup',
    't-popup',
    't-popup_show',
    // Добавляйте дополнительные классы, если нужно
];

// Функция для определения масштаба (автоскейл)
function getCurrentScale() {
    const body = document.body;
    const transform = window.getComputedStyle(body).transform;
    if (transform && transform !== 'none') {
        const matrix = transform.match(/matrix\(([^)]+)\)/);
        if (matrix) {
            const values = matrix[1].split(',');
            return parseFloat(values[0]) || 1;
        }
    }
    return 1;
}

// Переменная для отслеживания текущего масштаба
let currentScale = getCurrentScale();

// Инициализация Lenis с обновленными настройками
const lenis = new Lenis({
    duration: 1.2, // Время анимации скролла
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // Функция плавности
    orientation: 'vertical', // Вертикальный скролл
    smoothWheel: true, // Включаем плавный скролл колесом
    wheelMultiplier: 1, // Коэффициент скролла колесом мыши
    touchMultiplier: 1.5, // Коэффициент скролла на тачскринах
    infinite: false, // Отключение бесконечного скролла
    syncTouch: false, // Синхронизация с touch событиями

    // Функция предотвращения скролла для определенных элементов
    prevent: (node) => {
        // Проверяем наличие исключаемых классов у элемента или его родителей
        return classesToExclude.some(className =>
            node.classList.contains(className) ||
            node.closest(`.${className}`)
        );
    },

    // Виртуальный скролл для обработки автоскейла
    virtualScroll: (e) => {
        const newScale = getCurrentScale();

        // Если масштаб изменился, обновляем переменную
        if (newScale !== currentScale) {
            currentScale = newScale;
        }

        // Корректируем скорость скролла в зависимости от масштаба
        if (currentScale !== 1) {
            e.deltaY = e.deltaY / currentScale;
            e.deltaX = e.deltaX / currentScale;
        }
    }
});

// Обработка изменения размеров окна для пересчета масштаба
let resizeTimeout;
window.addEventListener('resize', () => {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(() => {
        currentScale = getCurrentScale();
        lenis.resize(); // Обновляем размеры Lenis
    }, 100);
});

// Добавляем атрибуты для предотвращения скролла после загрузки страницы
window.addEventListener('load', () => {
    classesToExclude.forEach((className) => {
        document.querySelectorAll(`.${className}`).forEach((element) => {
            element.setAttribute('data-lenis-prevent', '');
        });
    });
});

// Слушаем события скролла (опционально, для отладки)
lenis.on('scroll', (e) => {
    // console.log('Scroll event:', e);
});
</script>
<style>
/* Обновленные CSS стили для Lenis 1.3.11+ */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling {
    pointer-events: none;
    user-select: none;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* Предотвращение скролла для определенных элементов */
[data-lenis-prevent-wheel] {
    overscroll-behavior: none;
}

[data-lenis-prevent-touch] {
    overscroll-behavior: none;
}

/* Оптимизация для автоскейла */
body {
    transform-origin: top left;
}
</style>