The way to keep the scroll bar from affecting the width of the page

The main content of this article is "how to make the scroll bar not affect the width of the page". Interested friends might as well take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "so that the scroll bar does not affect the width of the page" bar!

Set the width of body to the width of window (controlled by the following script)

$("body") .css ("width", $(window) .width ())

At the same time, set the overflow of body (written in style)

Body {overflow-x: hidden;}

Ps:

In the same way, table in div is handled in the same way.

Set the width of tableContainer (written in style) and tableMain (script control) is equal to the width of tableMainHead

The code is as follows:

$(".tableMain") .css ("width", $(".tableMainHead") .css ("width"))

Set the overflow of tableContainer to hidden (written in style)

This brings a disadvantage, that is, when the size of the browser window changes, the content in body cannot be automatically centered (div, which was originally set by percentage width, etc., can be automatically centered using margin:auto, but now the extra hidden cannot be automatically centered).

At this point, I believe you have a deeper understanding of "the way to let the scroll bar not affect the width of the page". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!