Как изначально скрыть div без fla sh?

Question

У меня есть слайд вверх / вниз div. Поскольку вы не можете вывести его из поля зрения с помощью всего CSS, я вместо этого использую JavaScript вот так:

showHideElement = (element, open) => {
  if (open) {
    element.style['margin-top'] = 0;
  } else {
    element.style['margin-top'] = -element.scrollHeight + "px";
  }
}

Затем у меня есть кнопка, которую пользователь можно щелкнуть, чтобы переключить div в или из поля зрения. Все это работает нормально.

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

Проблема, с которой я сталкиваюсь, заключается в том, что для определения margin-top элемент должен быть сначала отрисован, чтобы можно было найти его scrollHeight. Это вызывает "fla sh", когда пользователь обновляет страницу, при этом они видят, что div на мгновение исчезает из поля зрения.

Мне нужно решение, в котором div уже не отображается, когда пользователь загружает страницу, но как это можно определить без предварительного рендеринга для определения scrollHeight, чтобы можно было установить его margin-top?

Answer 1

Вам необходимо рассчитать высоту элемента, что возможно при рендеринге элемента.

Вы можете попробовать visibility: hidden с position: absolute. Он не создаст белый прямоугольник.

Когда рендеринг завершен. Вы можете сбросить позицию, например, position: unset (или значение по умолчанию).

Answer 2

попробуйте установить его на display:none или visibility: hidden