滚动条引发页面抖动问题

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

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

可是这样会由于滚动条的缘由，使页面元素产生抖动（即页面元素产生位移）

想了不少办法，最终发现：

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

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

代码：

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