如何解决滚动条挤压内容导致界面晃动？

滚动条挤压解决之道：scrollbar-gutter

在需要滚动条的位置显示内容时，滚动条的出现可能挤压内容，导致界面晃动。除了传统的 overflow: overlay; 方法外，scrollbar-gutter 能够兼顾兼容性和避免内容晃动。

使用方法：

div {   scrollbar-gutter: stable; }

原理：

• stable 指定滚动条位置稳定
• 该属性提前预留滚动条的位置，即使出现滚动条也不会挤压内容

兼容性：

scrollbar-gutter 兼容主流浏览器，包括 chrome、firefox、safari 等。