CSS 中的overflow:visible是什么？和overf

这篇文章会讨论：overflow:visible 在什么情况下使用。overflow 的其他属性值用法。

一、缘起

最近在解决一个侧边栏弹出后，背景（即body）仍然可以滚动的问题。

看了AMP和百度百科类似交互的代码，都是在侧边栏弹出后给body增加overflow: hidden属性。当侧边栏隐藏时，再把属性移除。在移除属性时，不能简单地将overflow设置成auto，而是需要还原到之前设置的值。这就需要多一步操作。

// 侧边栏弹出时
bodyOverflow = getComputedStyle(document.body).overflow;
        document.body.style.overflow = "hidden";

// 侧边栏收起时
document.body.style.overflow = bodyOverflow;

在真实测试中发现，overflow的值为'visible'。这是什么呢？

二、寻它

在 MDN文档/overflow 中发现，overflow: visible是默认值，当不填写hidden或scroll等自定义值时生效。

A元素具有 overflow: visible 的属性，内层内容比较多时，分两种情况讨论。

1. A元素高度auto：无作用，A元素撑开，正常滚动

image.png

2. A元素具有固定高度：虽然A限制的高度，但内层内容并不会隐藏，而是完全显示在屏幕上，参与布局，甚至撑开外层dom高度。

   
   

这个样式真是太丑了，不忍直视。

Jenny_L 建议，A元素有高度的时候，不要使用overflow: visible，选用overflow家族的其他属性值。

三、扩展

除了默认值overflow: visible 之外，overflow还有其它取值：

最常用最温柔的是 overflow: scroll，会添加滚动条（mac和手机的滚动条自动隐藏，效果不明显），支持内容滚动。

overflow: scroll

最灵巧的是overflow: auto，由浏览器判断是否增加滚动条。在落后的浏览器上会有不错的效果。

最暴力的是overflow: hidden, 超出内容直接隐藏。如果外层元素宽高都固定，则超出部分直接不可见，也没有滚动条。

overflow: hidden 没有滚动条

-v-、附录：

在 MDN文档/overflow 中能得到真理。
效果截图自www.w3schools.com, 部分css由Jenny_L修改。