Высота элемента, кажется, прыгает взад и вперед всякий раз, когда я пытаюсь масштабировать их в процентах в небольшом ди ⇐ CSS

[Гость]

Я использую для этого React и Bootstrap.

О моем коде: У меня есть элемент с высотой 0 в рем. Я хочу, чтобы высота элементов увеличивалась при прокрутке страницы вниз, чтобы она выглядела так, будто она появляется из воздуха.

Функция handleWorksTitle по сути берет элемент и вычисляет, какую высоту он должен иметь, основываясь на том, где находится его нижний прямоугольник в окне. Как только нижний прямоугольник оказывается внутри окна, мы начинаем применять «анимацию», и, как я написал, высота рассчитывается как «к этому моменту у вас должно быть 100% целевой высоты». Целевой точкой является bottomPivot.current, который представляет собой процент высоты экрана, начиная снизу.

Код прерывается, если высота окна слишком мала или если значение bottomPivot.current слишком мало. По сути, если диапазон между нижней частью экрана и нижней точкой поворота слишком мал, он ломается.

Мой код:

function handleWorksTitle() { // получаем контейнер, который будем модифицировать const titleCont = document.querySelector("#works-title-cont"); // текущая позиция контейнера (позиция нижних прямоугольников) const currY = titleCont.getBoundingClientRect().bottom; // если позиция нижнего прямоугольника контейнера находится в пределах экрана if(currY