Workaround for the Calc scroll bar to appear without a page bounce

This time to bring you the Calc scroll bar appears the resolution of the page does not bounce, to solve the Calc scroll bar appears on the page does not beat the note what, the following is the actual case, together to see.

What is calc ()?

Calc () Literally we can interpret him as a function. In fact, Calc is the abbreviation for the English word Calculate (calculation), is a new function of CSS3, which is used to specify the length of the element. For example, you can use Calc () to set dynamic values for attributes such as border, margin, pading, font-size, and width for an element. Why is it a dynamic value? Because we use the expression to get the value. The biggest benefit of Calc (), however, is that the width of the element can be calculated from Calc () using the fluid layout.

Grammar

Calc () = Calc (arithmetic)

For example:

. Elm {  width:calc (expression);}

where "expression" is an expression used to calculate the length of an expression

Description

Used to dynamically calculate length values.

• Note that you need to keep a space before and after the operator, for example: Width:calc (100%-10px);

• Any length value can be calculated using the Calc () function;

• The Calc () function supports "+", "-", "*", "/" operations;

• The Calc () function uses standard mathematical precedence rules;

Compatibility

A simple example:

<! DOCTYPE html>
The following is the most commonly used this: the implementation of the scroll bar page does not bounce application

When the content of the page is loaded dynamically, there is no scroll bar at the beginning, and the scroll bar appears after the content increases, and the center-aligned layout with a fixed width shifts the width of the scrollbar to the left. The workaround is to add overflow-y:scroll to the content, or to populate the content with CSS based on the contents. This article describes calc to calculate the scrollbar width, and when there is a scrollbar, it also simulates a scrollbar width outside the content, so it is not offset.

It's simple, as long as one line of code is done:

. wrap-outer {    margin-left:calc (100vw-100%);}
Or:

. wrap-outer {    padding-left:calc (100vw-100%);}
First of all,. Wrap-outer refers to the parent of the center-wide body, and if not, create one (using the body can also achieve similar effects, but in the principle of width separation, not recommended);

Then, calc is calculated in CSS3, ie10+ browser support, IE9 browser basic support (cannot be used on background-position);

Finally, the 100VW relative to the browser's window.innerwidth, is the browser's internal width, note that the scroll bar width is also counted! And 100% is the available width, which is not the width of the scroll bar.

As a result, Calc (100vw-100%) is the width of the browser scroll bar (if there is no scroll bar is 0)! There is a scroll bar width (or both 0) occupied, the main content can always center the browser, so there is no beating!


Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS3 pointer-events use of the detailed

Focus-within the use of a detailed