CSS如何为滚动条预留右侧空间 解决新增面板时文字重排问题

解决方案 #

方案1：全兼容强制预留滚动条空间 #

给页面根元素添加如下CSS，始终为垂直滚动条预留占位，从根源避免宽度变化触发重排：

html {
  /* 始终显示垂直滚动条占位，兼容所有浏览器 */
  overflow-y: scroll;
}

该方案兼容所有主流浏览器，缺点是内容高度不足视口时，右侧仍会显示滚动条槽位。

方案2：现代浏览器优雅方案 #

使用CSS原生的scrollbar-gutter属性，仅预留滚动条空间、不会强制显示滚动条，是该场景的最优解：

html {
  /* 稳定预留滚动条 gutter 空间，不强制显示滚动条 */
  scrollbar-gutter: stable;
}

该属性支持 Chrome 94+、Firefox 97+、Safari 15.4+，覆盖95%以上的全球用户。

附带代码优化建议 #

你当前的JS代码存在逻辑问题：新增面板时重复设置了id属性，且动画样式绑定在id选择器上，会导致新增面板没有入场动画，可做如下修改：

1. 删除JS中重复设置id的行：

// 删掉这行，页面内id不能重复
newcont.setAttribute("id", "popperdiv")

2. 将CSS中的动画绑定到类选择器，替换原有的#popperdiv选择器：

/* 把原来的#popperdiv改成.popperdiv */
.popperdiv {
    opacity: 0;
    animation: pop 0.5s ease forwards;
}

内容的提问来源于stack exchange，提问作者noel puig