Home > Developer > JavaScript
1. Set overflow content overflow (set whether the set object displays a scroll bar)
Settings for overflow-x horizontal content overflow
Settings for overflow-y vertical content overflow
The values of the preceding three attributes are visible (default), scroll, hidden, and auto.
2. scrollbar-3d-light-color three-dimensional scroll bar bright side color (set the color of the scroll bar)
Scrollbar-arrow-color the color of the upper and lower arrow of the buttons
Scrollbar-base-color Basic color of the scroll bar
Scrollbar-dark-shadow-color the color of the strong shadow of the three-dimensional scroll bar
Scrollbar-face-color of the protruding part of the stereo scroll bar
Scrollbar-highlight-color the color of the blank area of the scroll bar
Scrollbar-shadow-color specifies the color of the shadow of a three-dimensional scroll bar.
We use several examples to explain the above style attributes:
1. Make the browser window never show a scroll bar
No horizontal scroll bar
<Body style = "overflow-x: hidden">
No vertical scroll bar
<Body style = "overflow-y: hidden">
No scroll bar
<Body style = "overflow-x: hidden; overflow-y: hidden"> or <body
Style = "overflow: hidden">
2. Set the scroll bar of the multi-line text box
No horizontal scroll bar
<Textarea style = "overflow-x: hidden"> </textarea>
No vertical scroll bar
<Textarea style = "overflow-y: hidden"> </textarea>
No scroll bar
<Textarea style = "overflow-x: hidden; overflow-y: hidden"> </textarea>
Or <textarea style = "overflow: hidden"> </textarea>
3. Set the color of the window scroll bar
Set the color of the window scroll bar to red <body style = "scrollbar-base-color: red">
Scrollbar-base-color sets the basic color. Generally, you only need to set this attribute to change the color of the scroll bar.
Add a special effect:
<Body style = "scrollbar-arrow-color: yellow; scrollbar-base-color: lightsalmon">
4. Define a class in the style sheet file and call the style sheet.
<Style>
. Coolscrollbar {scrollbar-arrow-color: yellow; scrollbar-base-color: lightsalmon ;}
</Style>
Call this method as follows:
<Textarea class = "coolscrollbar"> </textarea>
Code of the borderless window
// Step 1: Add the following code to the <Script language = javascript>
Minimizebar = "minimize.gif"; // minimize the "button" Image in the upper-right corner of the window
Minimizebar2 = "minimize2.gif"; // minimize the "button" image when the mouse is hovering
Closebar = "close.gif"; // close the "button" Image in the upper-right corner of the window.
Closebar2 = "close2.gif"; // close the "button" image when hovering over the mouse.
Icon = "icon.gif"; // small icon in the upper left corner of the window
Function noBorderWin (fileName, w, h, titleBg, moveBg, titleColor, titleWord, scr) // defines a function that pops up an infinite window. For more information, see parameter description 」, for actual use, see the last instance.
/*
------------------ Parameter description -------------------
FileName: The file displayed in the boundless window.
W: The window width.
H: The height of the window.
TitleBg: Background Color and border color of the window title bar.
MoveBg: Background Color and border color of the title bar when dragging a window.
TitleColor: Color of the text in the title bar of the window.
TitleWord: Text in the title bar of the window.
Scr: whether a scroll is displayed. Value: yes/no or 1/0.
--------------------------------------------
*/
{
Var contents = ""<Head>" +
"<Title>" + titleWord + "</title>" +
"<META http-equiv = \" Content-Type \ "content = \" text/html; charset = gb2312 \ ">" +
"<Object id = hhctrl type = 'application/x-oleobject' classid = 'clsid: adb880a6-d8ff-11cf-9377-00aa003b7a11 '> <param name = 'command' value = 'minimize'> </object> "+
"</Head>" +
"<Body topmargin = 0 leftmargin = 0 scroll = no onselectstart = 'Return false' ondragstart = 'Return false'>" +
"<Table height = 100% width = 100% cellpadding = 0 cellspacing = 1 bgcolor =" + titleBg + "id = mainTab>" +
"<Tr height = 18 style = cursor: default; onmousedown = 'X = event. x; y = event. y; setCapture (); mainTab. bgColor = \ "" + moveBg + "\"; 'onmouseup = 'releasecapture (); mainTab. bgColor = \ "" + titleBg + "\"; 'onmousemove = 'if (event. button = 1) self. moveTo (screenLeft + event. x-x, screenTop + event. y-y); '> "+
"<Td width = 18 align = center> </td>" +
"<Td width =" + w + "> <span style = font-size: 12px; color:" + titleColor + "; font-family:; position: relative; top: 1px;> "+ titleWord +" </span> </td> "+
"<Td width = 14> </td> "+
"<Td width = 13> </td> "+
"</Tr>" +
"<Tr height = *>" +
"<Td colspan = 4>" +
"<Iframe name = nbw_v6_iframe src =" + fileName + "scrolling =" + scr + "width = 100% height = 100% frameborder = 0> </iframe>" +
"</Td>" +
"</Tr>" +
"</Table>" +
"</Body>" +
"</Html> ";
Pop = window. open ("", "_ blank", "fullscreen = yes ");
Pop. resizeTo (w, h );
Pop. moveTo (screen. width-w)/2, (screen. height-h)/2 );
Pop.doc ument. writeln (contents );
If(pop.doc ument. body. clientWidth! = W | pop.doc ument. body. clientHeight! = H) // If the Infinity window does not appear in the pure IE window
{
Temp = window. open ("", "nbw_v6 ");
Temp. close ();
Window. showModalDialog ("about: <" + "script language = javascript> window. open ('', 'nbw _ v6 ', 'fullscreen = yes'); window. close (); "+" </"+" script> "," "," dialogWidth: 0px; dialogHeight: 0px ");
Pop2 = window. open ("", "nbw_v6 ");
Pop2.resizeTo (w, h );
Pop2.moveTo (screen. width-w)/2, (screen. height-h)/2 );
Pop2.document. writeln (contents );
Pop. close ();
}
}
</Script>
// Step 2: Add the following code to the <body> </body> area.
<A href = # none onclickdomainnoborderwin('rate.htm', '000000', '000000', '# 000000',' # cccccccccc ', 'test example of an infinite window ', 'yes');> open </a> 〉
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
