Solve the problem of page flicker caused by browser scroll bars

Fix the page flickering problem caused by browser scroll bars

Description

When my webpage was initially loaded, the content of the webpage did not occupy the entire height. As I added content later, when the content was close to the bottom of the browser, the scroll bar suddenly appeared, and the page flickered.

css solution

1 Mode 1

/*method 1 recommended*/.wrap-outer{margin-left: calc(100vw - 100%);}

First, .wrap-outer refers to the parent of the centered fixed-width body, if not, create one.
If the flicker is caused by the global scroll bar, you can also try setting it to the body tag, but test it yourself.
like my body{ margin-left: calc(100vw - 100%); }

2 Method 2 Style html

html{margin-right: calc(100% - 100vw);overflow-x: hidden;}

Method 2 After my test, the browser will not flicker, but it will cause the scroll bar below me not to appear.

Small tip: CSS vw make overflow:auto pageThe scroll bar does not jump when it appears « Zhang Xinxu-Xin Space-Xin Life (zhangxinxu.com)