Accordion展开引发页面偏移问题的原因排查及解决方法咨询

成因 #

展开包含长文本的Accordion后，页面总高度超出视口范围，浏览器会自动显示垂直滚动条；收起Accordion时，滚动条又会消失。由于滚动条本身占据15-20px左右的宽度，这种宽度的突变直接导致了页面内容的整体偏移。

解决方法 #

1. 强制页面始终显示垂直滚动条

通过CSS固定滚动条的显示规则，彻底消除宽度变化带来的偏移：

html {
    overflow-y: scroll;
}

此方法简单直接，页面会始终保留滚动条的宽度，即使内容不足时也会显示空的滚动条区域。

2. 使用scrollbar-gutter预留滚动条宽度（现代浏览器支持）

如果不想显示空滚动条，可以用该属性提前为滚动条预留固定宽度，仅在需要时显示滚动条：

html {
    scrollbar-gutter: stable;
}

该方案视觉更友好，但仅支持Chrome 94+、Firefox 93+等现代浏览器。

3. 限制Accordion内容容器高度，实现内部滚动

让Accordion的内容在容器内滚动，避免页面总高度发生变化：

.accordion-body {
    max-height: 400px;
    overflow-y: auto;
}

你可以根据布局需求调整max-height的数值，这样展开Accordion时不会触发页面滚动条的显示/隐藏，自然不会产生偏移。

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