最近在做11ty-book的移植工作时发现,网站页面在从短内容页面跳转至长内容页面时,会因为从无滚动条切换到有滚动条状态而发生抖动,而这个滚动条在页面中是有自己的占位的,这个时候就会出现因为忽然出现滚动条而网页内容布局抖动的问题。
找了一些相关的资料,有不同的前辈都处理过这个问题,因为我也没有一个个去测试,专业只是也不是很够,所以这里单纯分享一下所有方案,并指出我用的哪一种方案。
方式一
直接让滚动条一直显示,这会在右边占据一块内容,自然体验不好
html {
overflow-y: scroll;
}
方式二
兼容性一般
html {
overflow-y: overlay;
}
方式三
html {
margin-right: calc(100% - 100vw);
}
或者
html {
padding-left: calc(100vw - 100%);
}
这个方案是我见过最多博主分享的,逻辑为:
* 首先,html指的是居中定宽主体的父级,如果没有,创建一个(使用主体也是可以实现类似效果,不过本着宽度分离原则,不推荐)