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

2024-04-06

最近在做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属性可以设置滚动条的间隔，使其在滚动内容和视口之间留出一定的空白间隔。