滚动条引起页面抖动问题

2019独角兽企业重金招聘Python工程师标准>>>

项目过程中，很常见的 点击按钮 弹出遮罩和菜单，但同时可能会要求禁止滚动条滚动，这样可以

/* 无遮罩时 */
body {
    overflow: auto;
}
/* 有遮罩时 */
body {
    overflow: hidden;
}

但是这样会因为滚动条的原因，使页面元素产生抖动（即页面元素产生位移）

想了很多办法，最终发现：

1.使用html的滚动条代替body的滚动条

2.有遮罩时，body 设置溢出隐藏，这样html的滚动条存在，但是由于没有溢出（溢出部分已经被body隐藏了），所以html的滚动条时无法滚动的（即遮罩下面的页面内容不会滚动）

代码：

html {
    /* 滚动条一直存在，由溢出时可以滚动，无溢出时无法滚动，但是存在 */
    overflow: scroll;
}
/* 有遮罩时 */
body {
    overflow: hidden;
}
/* 无遮罩时 */
body {
    overflow: auto;
}

 

转载于:https://my.oschina.net/u/3108430/blog/1626274