美文网首页
水平居中布局与滚动条跳动的问题解决

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

作者: JoeAt | 来源:发表于2017-08-09 10:56 被阅读0次

    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;

    }

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/rtyfrxtx.html