overflow:overlay无效？试试scrollbar-gutter: stable吧

overflow:overlay无效？试试scrollbar-gutter: stable吧

overflow:overlay已被弃用

相信很多人都知道overflow有个overlay属性，当我们布局的时候，如果元素溢出了容器，此时就会出现滚动条。

而当滚动条出现时，因为滚动条的宽度会导致我们的布局错乱，这是非常让人苦恼的，所以overflow有个overlay属性专门用来解决这个问题。这个属性会将滚动条悬浮在容器上方，有点类似于定位，不过最近在使用这个属性的时候发现没有生效。本来以为是自己记错了，于是去MDN查了下，发现这个属性已经被弃用了。

本来是一个很实用的属性，不懂为什么要弃用，于是准备老老实实使用**::-webkit-scrollbar**搭配样式改动去实现，不过在查询兼容性的时候突然发现给出了替代使用属性：https://caniuse.com/?search=overflow%3Aoverlay

新特性scrollbar-gutter

这个属性是今年新鲜出炉的新特性，文档地址👉https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter，四大浏览器均以支持，简单来说这个属性就是为了给滚动条腾出空间的。当我们使用这个css属性后，容器会预留一个滚动条宽度的空间，这个空间的位置位于元素内边框边缘和容器padding的外边缘，当预留滚动条位置后在滚动条出现时就不会影响布局。

各种属性值就不说了，这里简单讲讲用法：

scrollbar-gutter = 
  auto                   |
  stable && both-edges?  

scrollbar-gutter可以设置三个值即：auto、stable、stable both-edges

这三种属性值表示的意思分别为：滚动条占据的空间只在滚动条出现时才会被占用、滚动条的位置始终存在,即使现在没有滚动条、元素两边都又滚动条的距离，保证元素居中。

值得注意的是当值为auto的时候解释如下：

The initial value. Classic scrollbars create a gutter when is , or when is and the box is overflowing. Overlay scrollbars do not consume space.overflow``scroll``overflow``auto

大致就是说经典滚动条是滚动条出现时才占用位置，而覆盖滚动条则不占用空间.

🚩注：edge支持覆盖滚动条的设置哦，指路👉https://guanjia.qq.com/knowledge-base/content/1313