javascript - 如果元素被溢出完全隐藏，设置可见性是否多余？

Question

我正在使用 HTML 和 CSS 开发一个滑入/滑出面板。

我注意到在互联网上的一些 CSS 代码示例中，一旦 div 完全不可见(通过一些负面的margin-left 索引或其他)，并被其父容器的 overflow: hidden 遮挡。 (然后当用户再次将其滑出时恢复可见)

但是，在其他示例中，他们忽略了此属性，而是依赖于它由于已经不可见而完全隐藏的事实。

我很好奇这两种方法的区别。我能想到的一个例子是性能:我不知道浏览器渲染引擎是否对设置为 visibility: hidden 的元素应用了更好的优化，因为可以保证它们不会被看到.

或者浏览器是否足够聪明，可以意识到它没有被显示？或者这些都不重要，无论它对用户可见、被溢出隐藏还是被 visibility: hidden 隐藏，性能都是相同的？

有没有人对此有任何见解？或者可以推荐最佳做法？

Answer 1

实际上有一项有趣的研究可以找到 here

为了节省您阅读它的时间，我会说这是您可能想要的主要部分:

The renderers correspond to the DOM elements, but the relation is not one to one. Non visual DOM elements will not be inserted in the render tree. An example is the "head" element. Also elements whose display attribute was assigned to "none" will not appear in the tree (elements with "hidden" visibility attribute will appear in the tree).

基本上来说，将元素设置为具有 none 的 visibilty 不会阻止它呈现，但使用 display: none 会。

关于您提到的编码示例，我认为这是个人喜好。有些人会将 visibility 设置为 none 以在隐藏元素进入 View 但不需要显示特定元素的情况下可能为自己双重覆盖，也许也是为了防止横向滚动条也出现？

但绝对不需要或不需要，在这种情况下，我个人会单独保留 visibility 属性。