在一个普通的容器滚动条挤压怎么办？

Question

除了overflow: overlay;方法之外，还有什么兼容性高的方法能够实现嘛？

Answer 1

使用scrollbar-gutter可以避免滚动条出现的时候内容不晃动

div{
  scrollbar-gutter: stable;
}

stable表示稳定，会提前预留滚动条的位置

https://www.zhangxinxu.com/wordpress/2022/01/css-scrollbar-gu...

Answer 2

如果要解决容器滚动时被滚动条挤压的问题，可以尝试使用CSS属性padding-right来占据滚动条宽度的空间，从而避免内容被遮挡。具体做法如下：给要添加滚动条的容器添加样式overflow: auto;。为容器添加如下样式：

.container {
  padding-right: calc(1em + 17px); /* 1em为滚动条默认宽度，17px为滚动条默认边框宽度 */
}

这样，容器就会在滚动条出现时，自动把右边的空间留给滚动条，从而避免内容被遮挡。这种方法兼容性较高，可以适用于大部分浏览器。需要注意的是，上述样式计算的滚动条默认宽度和边框宽度可能因浏览器而异，如果出现问题，可以根据实际情况进行微调。