Analysis and solution of the reasons for left and right jumps when loading web pages
|
I have been having this problem recently when designing websites. After designing the member center, with the content centered with margin:0 auto;, the webpage will swing to the left the moment it is opened, and then to the right when entering another page, and then swing back to the left. If you jump between pages frequently, you will feel dizzy. The reason is that when the height of the webpage is not enough, the scroll bar on the right will not appear. Here, the width of the webpage must be added to the width of the scroll bar. When margin:0 auto; is used, the webpage is centered, but when the height of the webpage allows the browser to have a scroll bar, the width of the webpage must of course be subtracted from the width of the scroll bar, and then the webpage will swing a little to the left. Otherwise, do you understand what I said above? Many people should have experienced this situation. The solution is very simple, just make the right scroll bar appear all the time in the style sheet (CSS). When the webpage is not high enough, the browser will also make it appear when the right scroll bar appears. The code is: Copy code The code is as follows:html{overflow-y:scroll;} |
<<: This article will show you the basics of JavaScript: deep copy and shallow copy
>>: Detailed tutorial on using Docker to build Gitlab based on CentOS8 system
Recommend
64-bit CentOs7 source code installation mysql-5.6.35 process sharing
First install the dependent packages to avoid pro...
My CSS architecture concept - it varies from person to person, there is no best, only suitable
Preface <br />I have been working in the fro...
HTML table tag tutorial (36): table header background color attribute BGCOLOR
The <TH> tag is used to set the properties ...
Several ways to encrypt and decrypt MySQL (summary)
Table of contents Written in front Two-way encryp...
MySQL 5.7.21 decompression version installation Navicat database operation tool installation
Installation of MySQL decompression version and N...
Detailed explanation of keepAlive use cases in Vue
In development, it is often necessary to cache th...
How to optimize MySQL index function based on Explain keyword
EXPLAIN shows how MySQL uses indexes to process s...
Implementation of Docker deployment of MySQL cluster
Disadvantages of single-node database Large-scale...
Introduction and usage summary of React-Native screenshot component react-native-view-shot
Table of contents 1. Phenomenon 2. Solution 3. Su...
JavaScript canvas to achieve scratch lottery example
This article shares the specific code of JavaScri...
Several mistakes that JavaScript beginners often make
Table of contents Preface Confusing undefined and...
How to use Webstorm and Chrome to debug Vue projects
Table of contents Preface 1. Create a new Vue pro...
Detailed explanation of how Node.js middleware works
Table of contents What is Express middleware? Req...
Install and configure ssh in CentOS7
1. Install openssh-server yum install -y openssl ...
A good way to improve your design skills
So-called talent (left brain and right brain) Tha...