overflow:overlay无效？试试scrollbar-gutter: stable吧
overflow:overlay已被弃用
相信很多人都知道overflow有个overlay属性，当我们布局的时候，如果元素溢出了容器，此时就会出现滚动条。
而当滚动条出现时，因为滚动条的宽度会导致我们的布局错乱，这是非常让人苦恼的，所以overflow有个overlay属性专门用来解决这个问题。这个属性会将滚动条悬浮在容器上方，有点类似于定位，不过最近在使用这个属性的时候发现没有生效。本来以为是自己记错了，于是去MDN查了下，发现这个属性已经被弃用了。
本来是一个很实用的属性，不懂为什么要弃用，于是准备老老实实使用 ::-webkit-scrollbar搭配样式改动去实现，不过在查询兼容性的时候突然发现给出了替代使用属性：caniuse.com/?search=ove…
新特性scrollbar-gutter
这个属性是今年新鲜出炉的新特性，文档地址👉developer.mozilla.org/en-US/docs/…，四大浏览器均以支持，简单来说这个属性就是为了给滚动条腾出空间的。 当我们使用这个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支持覆盖滚动条的设置哦，指路👉guanjia.qq.com/knowledge-b…
