如何在没有闪光灯的情况下最初隐藏 div？

Question

我有一个向上/向下滑动 div。 Because you cannot 只用 CSS 让它滑出视野，我使用 JavaScript 像这样：

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

然后我有一个按钮，用户可以单击该按钮来切换 div 进入或退出视图。这一切都很好。

问题是我希望能够保存用户的首选项，这样如果他们将 div 切换到视图之外，下次他们刷新页面时它就已经切换到视图之外了。这是使用 localstorage 完成的。

我遇到的问题是，为了确定 margin-top，必须首先呈现该元素，以便可以找到它的 scrollHeight。这会导致 "flash" 当用户刷新页面时，他们会看到 div 暂时滑出视图。

我想要一个解决方案，当用户加载页面时 div 已经不在视图中，但是如何在不首先渲染它来确定 scrollHeight 的情况下确定它，以便它的 margin-top 可以设置？

Answer 1

尝试将其设置为 display:none 或 visibility: hidden

Answer 2

需要计算元素高度，可以通过渲染元素实现。

您可以尝试 visibility: hidden 和 position: absolute。它不会创建一个白色矩形。

渲染完成时。您可以重置位置，例如 position: unset（或默认值）。

如何在没有闪光灯的情况下最初隐藏 div？

How to initially hide a div without a flash?

html

javascript

css

css-transitions