滾動條引發頁面抖動問題

項目過程當中，很常見的 點擊按鈕 彈出遮罩和菜單，但同時可能會要求禁止滾動條滾動，這樣能夠

/* 無遮罩時 */
body {
    overflow: auto;
}
/* 有遮罩時 */
body {
    overflow: hidden;
}

可是這樣會由於滾動條的緣由，使頁面元素產生抖動（即頁面元素產生位移）

想了不少辦法，最終發現：

1.使用html的滾動條代替body的滾動條

2.有遮罩時，body 設置溢出隱藏，這樣html的滾動條存在，可是因爲沒有溢出（溢出部分已經被body隱藏了），因此html的滾動條時沒法滾動的（即遮罩下面的頁面內容不會滾動）

代碼：

html {
    /* 滾動條一直存在，由溢出時能夠滾動，無溢出時沒法滾動，可是存在 */
    overflow: scroll;
}
/* 有遮罩時 */
body {
    overflow: hidden;
}
/* 無遮罩時 */
body {
    overflow: auto;
}