About the scroll bar in HTML

Last Update:2018-12-03 Source: Internet

Author: User

Tags border color

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Today, when I was studying niuyun's news and publishing system, instructor Niu introduced some knowledge about the scroll bar, not much mentioned. It only involves some of the knowledge about the scroll bar. If I want to study it in depth, this is not enough, collect related knowledge by yourself

I mean, it is common to say that when a page is deleted, the scroll bar is usually located before the page is deleted, rather than running to the top of the page in a very human way, so how is this implemented? In fact, the method is very simple. You only need to add maintainscrollpositiononpostback = "true" to the top part of the. aspx source code. See:

This is what I encountered when I learned about the NIU news publishing system. I will share with you some other tips on using HTML scroll bars.

(1) Hide the scroll bar

<Bodystyle = "overflow-X: hidden; overflow-Y: hidden">

(2) how to display a scroll bar in a cell or Layer

<Divstyle = "width: 200px; Height: 200px; overflow-X: auto; overflow-Y: auto;"> </div>

(3) JavaScript changes the style of the scroll bar in the frame, such as changing the color and changing the plane effect.

<Style>

Body {SCROLLBAR-FACE-COLOR: # ffcc99;

SCROLLBAR-HIGHLIGHT-COLOR: # ff0000;

SCROLLBAR-SHADOW-COLOR: # ffffff;

SCROLLBAR-3DLIGHT-COLOR: #000000;

SCROLLBAR-ARROW-COLOR: # ff0000;

SCROLLBAR-TRACK-COLOR: # dee0ed;

SCROLLBAR-DARKSHADOW-COLOR: # FFFF00 ;}

</Style>

Note:

Scrollbar-3dlight-color: color; set or retrieve the highlighted border color of the scroll bar;

Scrollbar-Highlight-color: color; set or retrieve the bright side color of the 3D interface of the scroll bar;

Scrollbar-face-color: color; set or retrieve the 3D surface color of the scroll bar;

Scrollbar-arrow-color: color; Sets or retrieves the color of the arrow in the scroll bar direction. This attribute is invalid when the scroll bar appears but is unavailable;

Scrollbar-shadow-color: color; set or retrieve the dark edge color of the 3D interface of the scroll bar;

Scrollbar-darkshadow-color: color; set or retrieve the dark border color of the scroll bar;

Scrollbar-base-color: color; Sets or retrieves the base color of the scroll bar. The other UI colors are automatically adjusted accordingly.

Scrollbar-track-color: color; set or retrieve the color of the drag area of the scroll bar.

Note:

Color indicates the color code you want to set. It can be hexadecimal, for example, # ff0000, which can be expressed in RGB, such as RGB (255 ); when setting the scroll bar style, you do not need to use all the attributes to take effect.

(4) page element positioning in Javascript

Clientx and clienty are the positions of the current mouse relative to the webpage. When the mouse is in the upper left corner of the page, clientx = 0 and clienty = 0;

Offsetx and offsety are the positions of the current mouse relative to a certain area in the webpage. When the mouse is located in the upper left corner of the area in the page, offsetx = 0 and offsety = 0;

Screenx and screeny are the positions of the mouse relative to the user's entire screen;

X and Y are the locations of the mouse relative to the current browser.

Scrollleft: set or obtain the distance between the left-side border of the object and the leftmost side of the currently visible content in the window (because of the creation of a scroll bar, the visible content on the page is not fixed currently ).

Scrolltop: set or obtain the distance between the top of the object and the top of the visible content in the window.

Left: X coordinate of the object to the page.

Top: Y coordinate of the object to the page

(5) shield selection, right-click, and so on

<Body oncontextmenu = self. event. returnvalue = falseonselectstart = "Return false">

In the following example, the scroll bar is automatically set according to the size of the form.
<HTML> 

The use of the scroll bar is very common, and its related knowledge is also quite a lot. I hope that I can continue to learn and summarize, improve your learning ability and learning efficiency.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More