Page flicker problem:

situation

1. Switching between pages with and without scrollbars causes elements in common parts of the page such as' <header></header> 'to shake left and right. 2. When the page is initially loaded, the height of each container has not been raised, and there is no scroll bar at this time; As the content loads, the scrollbar appears when the page container is held up by the content and the page flicker occurs.Copy the code

The solution

html{
    padding-left: calc(100vw - 100%);
}
Copy the code
  • 100VW is the browser view width, which is fixed and not affected by the scrollbar. 100% only includes the width of the HTML tag, not the width of the scrollbar. Therefore, the width of the calc(100VW-100%) is the width of the scrollbar.
  • However, this method only works if the page content is centered and the width unit of the page content cannot be %. In this case, the scrollbar appears, and the padding-left changes from 0 to the width of the scrollbar, so that the middle does not change and the page does not blink.
html{
    overflow-y: scroll;
    overflow-x: hidden;
}
Copy the code
  • Keep the scrollbar displayed all the time, so the width doesn’t change depending on the scrollbar. However, the scrollbar is displayed all the time, which is a little strange in the style.
html{
  margin-right: calc(100% - 100vw);
  overflow-x: hidden;
}
Copy the code
  • This method I think is very clever ah, here post a reference link: qqdie.com/archives/we…
  • This method also has some drawbacks, that is, when the scrollbar appears, the content with a scrollbar width on the right side of the page will not be visible because of the negative value of margin-right.
html::-webkit-scrollbar{
    display: none;
}
Copy the code
  • ::-webkit-scrollbarOnly in support ofWebKitWeb browsers (e.g., Google Chrome, Apple Safari) can be used. Compatibility is not enough, not very recommended to use
  • Use CSS to hide the scroll bar. This way, even if the page needs to be scrolled, the scrollbar will not appear and the width will not change. And does not affect the use of the mouse wheel scrolling page. However, if you have a large page, you won’t be able to drag and drop the scroll bar.

To sum up, each of the four methods has its advantages and disadvantages…