CSS:只滚动到可见内容

Question

所以我的页面上有两个 div 元素，一个直接在另一个之上。一个具有可见性:隐藏，另一个可见。我有一个按钮可以交换它们的可见性，每次单击它时，可见的 div 都会隐藏，隐藏的 div 会变得可见。这两个 div 都有需要浏览器垂直滚动的高度，但它们的高度不同。如果我将较短的设置为可见的，我仍然可以向下滚动尽可能远，如果较高的是可见的。因此，当显示较短的 div 时，它下方有一堆空白空间，因为您可以向下滚动到很远的地方。我该怎么做才能使窗口只滚动到它需要显示可见内容的程度？谢谢。

Answer 1

使用 display:none 代替 visibility:hidden。然后如果你想再次显示隐藏的 div，只需使用 display:block。

visibility:hidden 保留 div 使用的空间，只是不渲染它。相反，display:none 有效地完全删除了元素，包括它通常占据的空间。