Background management system, using antD component, when a page has a scroll bar, two operations in Windows will cause page jitter. PS: The body is not specially positioned.

1. Problem scenario

1. In the case of scroll bars, if the layout of the header is fixed, the content of the header will shake left and right when the popover opens and closes. The rest of the page looks fine.

2. If there are too many scrollbars on the page and the contents of the search results are not enough to occupy a screen, The page jitter occurs after the query and reset operations are performed.

2. Analyze the reasons

1. No jitter except for fixed layout reasons:

Antd’s Modal component deals with page jitter caused by scroll bars.

Windows scrollbars are 17px wide (Chrome and FireFox)

When a popover appears, it is usually set on the body:

style="overflow: hidden"
Copy the code

The scroll bar disappears. If nothing is done, the content moves to the right as the scroll bar disappears. Antd components do this by setting the body width to:

style="width: calc(100% - 17px)"
Copy the code

To avoid the whole thing moving right.

2. Fixed layout jitter cause:

Fixed layout element width is not affected by body.

When there is a scroll bar, its width is the visible width – the scroll bar. When the scrollbar disappears, its width is visible.

When a popover appears, it essentially increases the overall width, because the content in an element is typically centered at a fixed width.

As the popover appears and closes, “shake” occurs (open content moves to the right, closed content moves to the left).

3. Reason for the jitter of query content changes:

As the results change, the scrollbar changes, and therefore the content width of the page changes. Same principle as above. However, because the scrollbar is not processed with the Modal component when the content changes, the page jitter is caused.

3. Solutions

In summary, content movement is essentially caused by the appearance and disappearance of scroll bars. You can use margin/padding to control the layout of the content.

For example: margin – right

Margin-right :-17px when the scroll bar appears

Margin-right: 0 when the scroll bar disappears;

However, for scenario 2, it is uncertain when the scrollbar will appear. You have to listen for the scrollbar via JS, which is annoying.

How can I do this directly with CSS?

4. The CSS calculates the width

When it comes to CSS computing, the most familiar is cSS3’s new calc() method.

Calc () supports various CSS unit calculations. Width: calc(100%), which refers to the width of the screen except for the scrollbar, otherwise it is the entire viewable width of the screen.

The visual width of the screen is the width including the scroll bar, with another handy property: width: 100VM. Does not change with the scroll bar.

In summary, the real-time calculation of margin distance can be written as follows:

margin-right: calc(100% - 100vm);
Copy the code

Note: If padding is used, it is padding-left, but it does not support negative numbers.