Scrollbar causes page jitter problem

During the project, it is very common to click the button to pop up the mask and menu, but at the same time, it may be required to prohibit the scroll bar from scrolling , so that the

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

But this will cause the page elements to vibrate (that is, the page elements are displaced) due to the scroll bar.

After thinking a lot, I finally found:

1. Use html scroll bar instead of body scroll bar

2. When there is a mask, the body is set to overflow and hide, so that the scroll bar of the html exists, but because there is no overflow (the overflow part has been hidden by the body), the scroll bar of the html cannot be scrolled (that is, the content of the page below the mask) won't scroll)

Code:

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