Проблема Зависает React интерфейс

UchihaMadara написал(а):

Тебе нужно transition и transform translate, используя CSS

Нажмите для раскрытия...

kirillzver написал(а):

Предлагаю переделать процесс анимации прокрутки на CSS, а картинки SVG попробуй просто отключить на время, чтобы убедиться, что не в них проблема.

Нажмите для раскрытия...

fivepkost написал(а):

JavaScript:

import React, { useRef } from 'react';

const ScrollableTileContainer = ({ activeIndex }) => {
    const containerRef = useRef(null);

    const scrollToActiveTile = (instant = false) => {
        if (!containerRef.current) return;

        const container = containerRef.current;
        const tiles = container.children;

        if (tiles.length > activeIndex && tiles[activeIndex]) {
            const tile = tiles[activeIndex];
            const offsetLeft = tile.offsetLeft - container.offsetWidth / 2 + tile.offsetWidth / 2;
            container.scrollTo({
                left: offsetLeft,
                behavior: instant ? "auto" : "smooth",
            });
        }
    };

Код:

    useEffect(() => { // Центрируем активный элемент при изменении индекса
        scrollToActiveTile();
    }, [activeIndex]);

Нажмите для раскрытия...

PATRIOT написал(а):

В чём заключалась проблема?

Нажмите для раскрытия...