Website Design Analysis: page screen jitter without a scroll bar

Let the front-end design help out the page, go online and test to find screen jitter between page switches. How can this compatibility problem be solved? However, we can see that this is not a compatibility issue. The problem is caused by the absence of a scroll bar on the page. Ask the front-end design for a solution and say there is no solution.

No way. I only need to search for methods by myself. I believe that these things are not a problem and there must be a solution. Here is the method I found. Don't laugh.

What is a scroll bar? Check the right side of the page. Have you noticed that? Those who use Windows are familiar with the scroll bar.

A scroll bar appears when the display content exceeds one screen. A scroll bar is usually not displayed by default when the screen size does not exceed one screen.

The screen jitter occurs because the human eyes have obvious perception ability on the area of the webpage module of the same part. For example, for the navigation part, the whole site generally uses a header navigation. The navigation part of the two pages is located in one pixel, which can be clearly perceived.

　　Case 1: No scroll bars are available on the page.

The friend Management page of friend network has five tabs, but the distance between tabs and navigation is almost different during the switching process. Wonderful.

Here there are only two obvious pages, as shown below:

　　

 

Friend network-find friends

 

Friend network-address book

In this case, the tabs of the same horizontal line can be separated from the header. Each pixel cannot be less or more.

Case 2: some pages have no scroll bars.

Page 1 does not have a scroll bar, and page 2 has a scroll bar. The two pages are not misplaced. However, only when the page is switched, the head navigation jitters are detected. Page 2 is moved 15 pixels to the left by the scroll bar.

View a friend's webpage as follows:

　　

 

Friend network-No scroll bar

 

Friend network-with a scroll bar

The distance between the red line and the right is obviously shifted to the left.

Google search only found the Interactive Design of the webpage scroll bar, but did not talk about this phenomenon. Fortunately, zhihu contacted MoonMonster, a Baidu MUX member, and he gave me an answer.

This is the current browser design problem. If you want a simple solution, you can customize a scroll bar that always appears on your website.

SO, I did not find an unexpected answer. This is the only way to solve this problem.

Check that the scroll bar is fixed on the right of the Google homepage:

　　

 

Google Homepage

Write down this blog on the last day of the year. Haha.

Wish you a happy New Year

Unless stated: All articles are original in Gauin. You are welcome to repost them! Please enter the address of this Article for reprinting. Thank you!

Address: http://www.gauin.com/gundongtiao-yemian.html