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

本篇文章给大家分享《如何解决滚动条挤压内容导致界面晃动？》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

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

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

使用方法：

div {
  scrollbar-gutter: stable;
}

原理：

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

兼容性：

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

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何解决滚动条挤压内容导致界面晃动？》文章吧，也可关注golang学习网公众号了解相关技术文章。