纯 CSS 解决网页因滚动条抖动问题

April 06, 2024

最近在做 11ty-book 的移植工作时发现，网站页面在从短内容页面跳转至长内容页面时，会因为从无滚动条切换到有滚动条状态而发生抖动，而这个滚动条在页面中是有自己的占位的，这个时候就会出现因为忽然出现滚动条而网页内容布局抖动的问题。

找了一些相关的资料，有不同的前辈都处理过这个问题，因为我也没有一个个去测试，专业只是也不是很够，所以这里单纯分享一下所有方案，并指出我用的哪一种方案。

方式一

直接让滚动条一直显示，这会在右边占据一块内容，自然体验不好

html {
  overflow-y: scroll;
}

兼容性一般

html {
  overflow-y: overlay;
}

html {
  margin-right: calc(100% - 100vw);
}

或者

html {
  padding-left: calc(100vw - 100%);
}

这个方案是我见过最多博主分享的，逻辑为：

首先，html 指的是居中定宽主体的父级，如果没有，创建一个（使用主体也是可以实现类似效果，不过本着宽度分离原则，不推荐）；
然后，calc 是 CSS3 中的计算，IE10 + 浏览器支持，IE9 浏览器基本支持 (不能用在 background-position 上)；
最后，100vw 相对于浏览器的 window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而 100% 是可用宽度，是不含滚动条的宽度。
于是，calc(100vw - 100%) 就是浏览器滚动条的宽度大小（如果有，如果没有滚动条则是 0）！左右都有一个滚动条宽度（或都是 0）被占用，主体内容就可以永远居中浏览器啦，从而没有任何跳动！

scrollbar-gutter: stable;

我目前用的是这个方案，据原文作者提到 scrollbar-gutter 是 Chrome94 版本以上提供的新特性。

Scrollbar-gutter 是 CSS 的一个属性，它用于控制滚动条（scrollbar）的间隔或空白区域的大小。具体来说，scrollbar-gutter 属性可以设置滚动条的间隔，使其在滚动内容和视口之间留出一定的空白间隔。