Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

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

2025-04-24 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

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!

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report