水平居中布局与滚动条跳动的问题解决

1. overflow-y: scrolll; 滚动条常驻。

2. 在居中元素外层包裹一个元素,对其设置:

margin-left: calc(100vw - 100%);

100vw为浏览器的innerWidth, 100%为不包含滚动条的可用宽度,

从而从视觉上摆脱了抖动的问题。

3. 传说中的终极解决方案:

html {

overflow-y: scroll;

}

:root {

overflow-y: auto;

overflow-x: hidden;

}

:root body {

position: absolute;

}

body {

width: 100vw;

overflow: hidden;

}

你可能感兴趣的:(水平居中布局与滚动条跳动的问题解决)