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
Introduction to installing and configuring JDK under CentOS system
Table of contents Preface Check and uninstall Ope...
Some parameter descriptions of text input boxes in web design
In general guestbooks, forums and other places, t...
How InnoDB implements serialization isolation level
Serialization implementation InnoDB implements se...
Analysis on the problem of data loss caused by forced refresh of vuex
vuex-persistedstate Core principle: store all vue...
Implementing simple tabs with js
Tab selection cards are used very frequently on r...
Example code of Vue3 encapsulated magnifying glass component
Table of contents Component Infrastructure Purpos...
Detailed steps for deploying https websites and configuring address rewriting in Nginx
Nginx is a high-performance website server and re...
How to insert Emoji expressions into MySQL
Preface Today, when I was designing a feedback fo...
Teach you how to subcontract uniapp and mini-programs (pictures and text)
Table of contents 1. Mini Program Subcontracting ...
Detailed Linux installation tutorial
(Win7 system) VMware virtual machine installation...
Detailed explanation of how to stop the Docker container from automatically exiting
This article briefly introduces the relationship ...
Introduction to partitioning the root directory of Ubuntu with Vmvare virtual machine
Table of contents Preface Rationale Procedure 1. ...
Two solutions for Vue package upload server refresh 404 problem
1: nginx server solution, modify the .conf config...
Simple steps to implement H5 WeChat public account authorization
Preface Yesterday, there was a project that requi...
Implementation of Docker deployment of Nuxt.js project
Docker official documentation: https://docs.docke...