Home > Article > Web Front-end > Solution to the problem that the page does not jump when the Calc scroll bar appears

Solution to the problem that the page does not jump when the Calc scroll bar appears

php中世界最好的语言Original: 2018-03-21 11:55:381518browse

This time I will bring you the solution to the problem that the page does not jump when the Calc scroll bar appears. What are the things to note?The following is a practical case, let's take a look at it.

What is calc()?

calc() literally we can understand it as a functionfunction . In fact, calc is the abbreviation of the English word calculate. It is a new function of CSS3 and is used to specify the length of elements. For example, you can use calc() to set dynamic values for the border, margin, padding, font-size, and width properties of an element. Why is it called a dynamic value? Because we use expressions to get the value. However, the biggest benefit of calc() is that it can be used in fluid layout. The width of the element can be calculated through calc().

Syntax

calc() = calc(四则运算)

For example:

.elm {
  width: calc(expression);
}

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

Description

Used to dynamically calculate the length value.

It should be noted that a space needs to be reserved 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 operation precedence rules;

Compatibility

Simple example:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>calc()函数_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test {
    width: calc(100% - 50px);
    background: #eee;
}
</style>
</head>
<body>
<p class="test">我的宽度为100% - 50px</p>
</body>
</html>

The following will explain the most commonly used one: the application that implements the page without jumping when the scroll bar appears

When the page content is dynamically loaded, start There are no scroll bars, and scroll bars appear when the content increases. At this time, using a fixed-width center-aligned layout will shift one scroll bar width to the left. The solution can be to add overflow-y:scroll to all the content; or fill it with CSS according to the content and then add the content. This article introduces calc to calculate the scroll bar width. When there is a scroll bar, a scroll bar width is also simulated outside the content, so it will not be offset. ·

It’s very simple, just one line of code to get it 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 centered fixed-width body, If not, create one (similar effects can be achieved by using the body, but it is not recommended based on the principle of width separation);

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. Note that the scroll bar width is also included in the calculation. ! And 100% is the available width, which is the width without scroll bars.

So, calc(100vw - 100%) is the width of the browser scroll bar (if there is one, if there is no scroll bar, it is 0)! If there is a scroll bar width on the left and right (or both are 0), the main content can always be centered in the browser without any jumps!

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Solution to the problem that the page does not jump when the Calc scroll bar appears

Related articles