javascript - 使 DIV 在 CSS 和 JavaScript 中不可见

Question

通过将显示设置为无并将可见性设置为隐藏，我设法使 DIV 标记在 JavaScript 中不可见。也可以用这个类来实现:

.invisible {
    display: none;
    visibility: hidden;
}

Display none 将确保 DIV 框为空，而 visibility hidden 将确保它不可见。这种方法的问题是当我有可滚动的 DIV 或内容溢出的文本区域时，当你设置 display: none 时，一些浏览器会忘记这些元素的滚动位置。有没有更好的方法可以在不使用显示属性的情况下使 DIV 不可见？如果可能的话，我宁愿不使用 JavaScript 来记录滚动位置等。

编辑:

在你的帮助下我设法解决了这个问题，我应用了以下内容:

.invisible {
    visibility: hidden;
    position: absolute;
    top: -9999px;
}

.visible {
    visibility: visible;
    position: static;
}

我试过 left: -9999px，但这会扩展 IE 中的垂直滚动条...我还将我的文本区域包装在另一个 DIV 中，并对其应用可见/不可见样式，因为否则文本区域将失去其滚动位置。我在 iPhone 上的 Chrome、Firefox、IE 和 Safari 中对此进行了测试。请注意，包裹在文本区域周围的 DIV 在 FF 中似乎没有帮助，滚动条仍然重置。但是可滚动的 DIV 现在很好了。感谢您的帮助!

Answer 1

如果您希望元素不可见但仍然呈现，您可以只使用visibility:hidden。 display:none 将完全删除它并导致您提到的滚动行为。