Свойство scaleY не поддерживается должным образом для небольших экранов

Я пытаюсь исправить ошибку css для мобильных экранов
Когда я нажимаю раздел 1, содержимое открывается, и если я перемещаюсь до нижней части раздела, одно содержимое и после этого, если я нажимаю раздел раздела 1, закрывается.
но я не вижу раздел 2 после этого, я вижу раздел 3, поскольку экран перемещается вверх.
как сохранить раздел 2 на нашем экране.
Я делаю что-то неправильно с свойством scaleY.
предоставление соответствующего кода ниже

Я использовал scrollIntoView, но все же не указывал на вторую идею.

Я использовал window.scrollTo(0, 0), но все же не указывал на вторую идею.

 .television .chromecast .sun .sunItem > .bulb {
    overflow: hidden;
    transition: transform .5s, max-height .5s;
    transform: scaleY(0);
    box-sizing: border-box;
    max-height: 0;
    transform-origin: center top;
}

 .television .chromecast .sun .sunItem.selected > .bulb {
    transform: scaleY(1);
    max-height: 100%;
}

Ответ 1

Нам нужно правильно вызвать функцию выбора

onSelect() {
this.props.onSelect(this.props.id);
this.focusDiv();
}

Ответ 2

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

Всегда плохая идея свернуть предыдущие элементы при расширении нового, особенно на мобильных устройствах.

Чтобы исправить это, вам потребуется script прокрутка вверху открытого раздела. Это можно легко достичь с помощью jQuery.ScrollTo() или чего-то подобного, но, честно говоря, я бы просто оставил предыдущие разделы открытыми, если у пользователей нет тенденции прокручивать назад, и для этого потребуется много прокрутки, чтобы вернуться к началу страницы. Другие решения UX, такие как прокрутка к верхней ссылке, могут пригодиться, чтобы решить эту проблему.