Why is the scroll bar on the web page set on the right?

Why is the scroll bar on the right? Triple Tutorial

Why are the scroll bars of the browsers and word documents that we use every day on the right? Many designers think that it is a better design to put the scroll bar on the left, but the fact is that since Xerox launched Star (the first computer with a graphical interface), every graphical interactive interface has placed the scroll bar on the right. Apart from typing, dragging the scroll bar is perhaps one of the most commonly used operations in a graphical interactive interface. Think about when you would typically use a scroll bar. For example, if you are looking for something in a document or form, you drag the scroll bar down little by little, and at the same time you keep scanning the text until you find what you want.
What are your eye movements during this series of processes? Generally speaking, we read text from left to right, and important landmark information (such as names or titles) usually appears on the far left. Therefore your eyes have to constantly switch from the scroll bar on the right to the beginning of the article on the left. To experience this process more personally, you can open a document, make the window shorter and wider, and then try to drag the scroll bar to find something. You may find the constant shifting of your visual focus very uncomfortable. If the scroll bar is placed on the left, this problem is immediately solved.
In fact, in the earliest WIMP interfaces, the scroll bar could be on either the left or the right, but was placed on the left by default. Until Xerox set the scroll bar on the right in Star. This setting was later inherited by Apple's Lisa, then passed down to the famous Macintosh, and finally accepted by the entire computer industry.

So what exactly prompted the right-aligned design of the scroll bar? If the scroll bar was on the left, your hand would have to cross the entire screen to drag it. Of course, it is not your hand that actually crosses the screen, but your mouse pointer, but your brain will think that it is your hand that crosses the screen. This psychological phenomenon is similar to a phantom limb, where the mouse you operate and the mouse pointer on the screen become an extension of your arm in your brain, so that the information on the screen is blocked by this virtual arm. Although you can actually read the information on the page without any hindrance, you will inexplicably feel that something is wrong.

<<: html option disable select select disable option example

>>: Detailed explanation of Linux netstat command

Reduce memory and CPU usage by optimizing web pages

Why is the scroll bar on the web page set on the right?

Reduce memory and CPU usage by optimizing web pages

Example of using rem to replace px in vue project

Detailed explanation of how to query fields containing '%' in MySQL like (ESCAPE usage)

How to modify the port mapping of a running Docker container

Do you know all 24 methods of JavaScript loop traversal?

JavaScript Reflection Learning Tips

Example code for css flex layout with automatic line wrapping

JavaScript exquisite snake implementation process

Parameters to make iframe transparent

Element's el-tree multiple-select tree (checkbox) parent-child node association is not associated

Recommend

vue-pdf realizes online file preview

Understanding and usage scenarios of ES6 extension operators

HTML table border control implementation code

Detailed explanation of scheduled tasks and delayed tasks under Linux

The difference between the name and id of the a tag's target pointing to the iframe

How to use a game controller in CocosCreator

HTML Tutorial: Collection of commonly used HTML tags (5)

How to use MySQL group by and order by together

Native JavaScript to achieve skinning

A Brief Discussion on the Navigation Window in Iframe Web Pages

The question of whether a tag opens a new page. The opening status of major websites is summarized

Detailed explanation of CSS style cascading rules

HTML background image and background color_PowerNode Java Academy

Introduction to SSL certificate installation and deployment steps under Nginx

mysql5.7.21 utf8 encoding problem and solution in Mac environment