CSS-滚动条跳动问题

发表于

一、问题描述

信息流页面是从上往下push渲染的。开始只有头部一些信息加载，此时页面高度有限，没有滚动条；然后，更多内容显示，滚动条出现，占据可用宽度，margin: 0 auto主体元素自然会做偏移——跳动产生。

二、利用calc和vw

1
2
3
4
5
6
7
8
.wrap-outer {
    margin-left: calc(100vw - 100%);
}

/*或者：*/
.wrap-outer {
    padding-left: calc(100vw - 100%);
}

  • 100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！

  • 100%是可用宽度，是不含滚动条的宽度。

三、只利用vw

1
2
3
4
.wrap-outer {
    width: 100vw;
    overflow-x: hidden;
}