Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to prevent the page from jumping when the CSS page scroll bar appears". In the operation of the actual case, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

CSS3 calculates calc and vw units to skillfully realize that the page does not jump when the scroll bar appears.

It's simple, it only takes one line of code to get it done:

CSS Code copies content to the clipboard

. wrap-outer {

Margin-left: calc (100vw-100%)

}

Or:

CSS Code copies content to the clipboard

. wrap-outer {

Padding-left: calc (100vw-100%)

}

Then you can celebrate setting off firecrackers!

First of all, the .wrap-outer refers to the parent of the centered subject, if not, create one (using the subject can achieve a similar effect, but based on the principle of width separation, it is not recommended)

Then, calc is a calculation in CSS3, supported by IE10+ browsers, and basically supported by IE9 browsers (cannot be used on background-position)

Finally, 100vw is the internal width of the browser relative to the browser's window.innerWidth, and note that the scroll bar width is also taken into account! 100% is the available width, which is the width without the scroll bar.

Therefore, calc (100vw-100%) is the width of the browser scroll bar (or 0 if there is no scroll bar)! With a scroll bar width (or both 0) occupied on both sides, the main content can always be centered in the browser without any jump!

You can click here (IE10+): the page does not jump demo when the scroll bar appears.

On the demo page, the title and the girls below are centered. Among them, the girl did the "scroll without jumping" treatment described in this article, but the title did not. As a result, you will find that the presence of the scroll bar will make the title text jump, but the girl is as firm as a goddess:

Compatibility

Support: IE9+ and other modern browsers.

Processing under narrow screen width

The above CSS is still a little flawed, when the browser width is relatively small, there is obviously more white on the left side than on the right side, which may seem a little silly. At this point, it might be better to do a little responsive processing:

CSS Code copies content to the clipboard

@ media screen and (min-width: 1150px) {

. wrap-outer {

Margin-left: calc (100vw-100%)

}

}

This is the end of the content of "how to prevent the page from jumping when the CSS page scroll bar appears". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.