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

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;

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,887评论 0 1
  • 我想, 张开手,你便拥有了全世界 新年过后几天,我便收拾了行李,与妈妈一起坐上了飞往加德满都的飞机。其实,我对这...
    萨托托阅读 575评论 2 5
  • 你还在为工作效率不高而烦恼吗?你还在感叹为什么成功的都是别人?你还在每天一篇篇阅读微信上的各种人生激励鸡汤,自己的...
    勤奋虎哥阅读 3,237评论 16 135
  • @张小喵 2015.12.20 雨 愣愣的看了20集【北上广不相信眼泪】自己都不知道为什么……看不下去了真的好久...
    张小喵Y阅读 292评论 0 0