HTML scroll bar style code and usage techniques


May 03, 2021 12:37 HTML


Table of contents


In html pages, we all know that long articles take up most of the space in the page, affecting the aesthetics and reading experience of the overall site page, so adding a text box with scroll bars to the html page is a good solution to this problem. The web scroll bar itself is part of the browser, which makes it easy to browse larger web pages, and here's the syntax:

color: #ffffff;
background-color: #000000;
border: solid 2px black;
width: 120px;
height: 200px;
overflow: scroll;
scrollbar-face-color: #889B9F;
scrollbar-shadow-color: #3D5054;
scrollbar-highlight-color: #C3D6DA;
scrollbar-3dlight-color: #3D5054;
scrollbar-darkshadow-color: #85989C;
scrollbar-track-color: #95A6AA;
scrollbar-arrow-color: #FFD6DA;

The above syntax produces a text scroll box with a black background and gray-blue border. T he parameters in the syntax are fairly simple, mainly controlling the colors of different parts, and you can make changes and see the actual effects in the preview. As for resizeing the text box, you can exit HTML editing mode after inserting this syntax and then use the mouse to adjust directly on the log editing page.



scroll bar property settings in html

scrollbar styles are detailed

1, overflow when the settings (set whether the set object shows scroll bars)
overflow-x horizontal content overflows
overflow-y vertical content overflows
The values set by the above three visible (default), scroll hidden 、auto


2, scrollbar-3d-light-color scroll bar bright edge color (set the color of the scroll bar)
scrollbar-arrow-color upper and lower buttons
scrollbar-base-color scroll bar
scrollbar-dark-shadow-color with strong shadows on the stereo scroll bar
scrollbar-face-color bar protrudes part of the color
scrollbar-highlight-color scroll bar
scrollbar-shadow-color stereo scroll bar shadow

HTML scroll bar style code and usage techniques


Let's look at the style properties above with a few examples:


1. Let the browser window never appear scroll bar

There is no horizontal scroll bar
<body style="overflow-x:hidden">
There is no vertical scroll bar
<body style="overflow-y:hidden">
There is no scroll bar
"overflow-x: hidden; overflow-y:hidden" or "lt;body"
style="overflow:hidden">


2. Set a scroll bar for a multi-line text box

There is no horizontal scroll bar
<textarea style="overflow-x:hidden"></textarea>

There is no vertical scroll bar
<textarea style="overflow-y:hidden"></textarea>

There is no scroll bar
<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
or "overflow: hidden" or "lt;/ textarea"


3. Set the color of the window scroll bar

Set the color of the window scroll bar to be red, slt; body style, scrollbar-base-color: red;
Scrollbar-base-color sets the basic color, in general, only need to set this property to achieve the purpose of changing the color of the scroll bar.
Add a little 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; s crollbar-base-color:lightsalmon; }
</style>

Call this way:
<textarea class="coolscrollbar"></textarea>

Scrollbar-Face-Color the color of the scroll bar surface;
Scrollbar-Highlight-Color the color of the bevel and left slope on the scroll bar;
Scrollbar-Shadow-Color the color settings for the lower and right bevels of the scroll bar;
Scrollbar-3Dlight-Color the color of the edges on the top and left of the scroll bar;
Scrollbar-Arrow-Color the arrows at both ends of the scroll bar.
Scrollbar-Track-Color the color setting for the scroll bar base plate;
Scrollbar-Darkshadow the color for the lower and right edges of the scroll bar.

Example:

<textarea style="width:330px; o verflow:scroll; o verflow-x:hidden; "></textarea>


HTML scroll bar style code and usage techniques

HTML various scrolling property codes

slt;marquee;general roll-up-lt;/marquee-gt; slt;br /;gt;
slt;marquee behavior s slide> sliding s/marquee sgt; slt;br /;
lt;marquee behavior s alternate sgt; roll back and forth slt;/marquee=lt;br/;br/;
lt;marquee direction s down;roll down;/marquee=gt; slt;br /;gt;
lt;marquee direction=up> Roll up./marquee=gt; slt;br /;gt;
lt;marquee direction-right-right-roll-right-lt;/marquee-gt; slt;br /;
lt;marquee direction s left sgt; roll left sl;/marquee sgt; slt;br /;
the number of rolls of the sl;marquee loop s2 s/marquee sgt; slquee s/br s/sgt;
lt;marquee scrollamount s 30 sgt; set the rolling distance sl;/marquee sgt; slquee-br /sgt;

Html The scroll bar color setting method is described

scrollbar-arrow-color: color; The color of the triangle arrow
scrollbar-face-color: color; The color of the stereo scroll bar (including the background color of the arrow section)
scrollbar-3dlight-color: color; //The color of the bright edges of the stereo scroll bar
scrollbar-highlight-color: color; The highlight color of the /?scroll bar (left shadow?) ) */
scrollbar-shadow-color: color; //The color of the stereo scroll bar shadow
scrollbar-darkshadow-color: color; //The color of the shadow outside the stereo scroll bar
scrollbar-track-color: color; //three-dimensional scroll bar background color/
scrollbar-base-color: color; The base color of the scroll bar/


webkit no longer a few simple CSS properties, but a bunch of CSS pseudo-elements:
-webkit-scrollbar as a whole
-webkit-scrollbar-button at both ends of the scroll bar
-webkit-scrollbar-track outer orbit
-webkit-scrollbar-track-piece inner track, middle part of scroll bar (removed)
-webkit-scrollbar-thumb (drag bar?). S lider? T he one in the scroll bar that can be dragged, is it swollen and translated? )
-webkit-scrollbar-corner corner
-webkit-resizer the style of the drag block in the lower right corner

HTML scroll bar style code and usage techniques

With these pseudo-elements, you can completely rewrite the scroll bar style of a Web site.
Of course, webkits offer more than that, and there are many pseudo-classes that can enrich the scroll bar style:

:horizontal – horizontal pseudo-classes are applied to scroll bars in a horizontal direction
:vertical – vertical pseudo-classes are applied to scroll bars in vertical directions
:decrement – decrement is applied to buttons and inner tracks. I t is used to indicate whether the button or inner track will reduce the position of the window (for example, above the vertical scroll bar, to the left of the horizontal scroll bar).
:increment – increment to decrement in that it indicates whether a button or inner track increases the position of the window (for example, below the vertical scroll bar and to the right of the horizontal scroll bar). )
:start – start is also applied to buttons and sliders. I t is used to define whether an object is placed in front of the slider.
:end similar to the start pseudo-class, which identifies whether an object is placed behind the slider.
:double-button buttons and inner tracks. U sed to determine whether a button is one of a pair of buttons placed at the same end of the scroll bar. F or an inner track, it indicates whether the inner track is close to a pair of buttons.
:single-button similar to the double-button pseudo-class. F or buttons, it is used to determine whether a button is independent of itself in a section of the scroll bar. F or the inner orbit, it indicates whether the inner orbit is close to a single-button.
:no-button for inner tracks to indicate whether the inner track is scrolling to the end of the scroll bar, for example, when there are no buttons at neither end of the scroll bar.
:corner-present for all scroll bar tracks to indicate whether the scroll bar fillets are displayed.
:window-inactive for all scroll bar tracks to indicate whether a page container (element) with a scroll bar applied is currently activated. ( In the most recent version of webkit, the pseudo-class can also be used for::selection pseudo-elements.) T he webkit team has plans to extend it and push it into a standard pseudo-class)
In addition, :enabled :disabled :hover :active can also be used in scroll bars.

Html Tips for using scroll bars

(1) Hide the scroll bar

<bodystyle="overflow-x:hidden;overflow-y:hidden">

(2) How a scroll bar appears in a cell or layer

<divstyle="width:200px; h eight:200px;overflow-x:auto;overflow-y:auto; "></div>

(3) javascript changes the style of scroll bars in the frame, such as changing color, changing to plane effect, etc

<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>

Description:

scrollbar-3dlight-color:color ​; S et or retrieve the color of the scroll bar's bright border;

scrollbar-highlight-color:color ​; S et or retrieve the bright edge color of the scroll bar 3D interface;

scrollbar-face-color:colo​r ​; S et or retrieve the color of the scroll bar 3D surface;

scrollbar-arrow-color:color ​; S et or retrieve the color of the scroll bar direction arrow;

scrollbar-shadow-color:color ​; S et or retrieve the dark edge color of the scroll bar 3D interface;

scrollbar-darkshadow-color:color ​; S et or retrieve the color of the dark border of the scroll bar;

scrollbar-base-color:color ​; S et or retrieve the scroll bar reference color. O ther interface colors are automatically adjusted accordingly.

scrollbar-track-color:color ​; S et or retrieve the color of the drag area of the scroll bar


Note:

Color for the color code you want to set, can be 16 percent, such as the sFF0000, can be expressed in RGB, such as rgb (255,0,255);

(4) Page element positioning in javascript

clientX clientY current position of the mouse relative to the web page, when the mouse is located in the upper left corner of the page clientX=0, clientY=0;

offsetX offsetY current position of the mouse relative to an area of the page, when the mouse is located in the upper left corner of this area of the page offsetX=0, offsetY=0;

screenX screenY of the mouse relative to the user's entire screen;

x, y is the current position of the mouse relative to the current browser

scrollLeft or gets the distance between the left boundary of the object and the far left end of the currently visible content in the window (the current page visible content is not certain because of the scroll bar).

scrollTop Sets or gets the distance between the top of the object and the top of the visible content in the window.

left The X coordinates of the object relative to the page.

top The object's Y coordinates relative to the page

(5) Shield selection, right-click, etc

<body oncontextmenu=self.event.returnValue=falseonselectstart="return false">


HTML scroll bar style code and usage techniques


The following small example is the implementation of scroll bars that are automatically set based on the size of the form

[html]
<SPAN style="FONT-SIZE: 18px"><html>
<head>
<style type="text/css">
. TopDIV
{
position:absolute;
left:130px;
top:10px;
width:105;
height:30;
overflow-x:hidden;
overflow-y:auto;
float: right;
border-style.:solid;
border-width:;
border-color:red
}
. LeftDIV
{
position:absolute;
left:10px;
top:40px;
width:120;
height:60;
overflow-x:hidden;
overflow-y:hidden;
float: right;
border-style.:solid;
border-width:;
border-color:yellow
}
. M ainDIV
{
position:absolute;
left:130px;
top:40px;
width:120;;
height:80;
overflow-x:auto;
overflow-y:auto;
float: right;
border-style.:solid;
border-width:;
border-color:blue
}
</style>
<script type="text/javascript" language="javascript">
function setStyle()
{
The source of 145, LoftDiv, is 15 (15 is the width of the scroll bar)
document.getElementById("a").style.width=document.body.clientWidth - 145;
The source of 130 is LeafDiv's leaf and width
document.getElementById("c").style.width=document.body.clientWidth - 130;
55 of the source topDIV's top-height plus 15 (15 is the width of the scroll bar)
document.getElementById("b").style.height=document.body.clientHeight - 55;
//40的由来TopDIV的top+height
document.getElementById("c").style.height=document.body.clientHeight - 40;
}
</script>

</head>
<body onresize="setStyle();" onLoad="setStyle();" >

<div id='a' class="TopDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>

<div id='b' class="LeftDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
<div id='c' onscroll="document.getElementById('b').scrollTop = this.scrollTop;document.getElementById('a').scrollLeft = this.scrollLeft;"
class="MainDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
</body>
</html>
</SPAN>

<html>
<head>
<style type="text/css">
. TopDIV
{
position:absolute;
left:130px;
top:10px;
width:105;
height:30;
overflow-x:hidden;
overflow-y:auto;
float: right;
border-style.:solid;
border-width:;
border-color:red
}
. LeftDIV
{
position:absolute;
left:10px;
top:40px;
width:120;
height:60;
overflow-x:hidden;
overflow-y:hidden;
float: right;
border-style.:solid;
border-width:;
border-color:yellow
}
. M ainDIV
{
position:absolute;
left:130px;
top:40px;
width:120;;
height:80;
overflow-x:auto;
overflow-y:auto;
float: right;
border-style.:solid;
border-width:;
border-color:blue
}
</style>
<script type="text/javascript" language="javascript">
function setStyle()
{
The source of 145, LoftDiv, is 15 (15 is the width of the scroll bar)
document.getElementById("a").style.width=document.body.clientWidth - 145;
The source of 130 is LeafDiv's leaf and width
document.getElementById("c").style.width=document.body.clientWidth - 130;
55 of the source topDIV's top-height plus 15 (15 is the width of the scroll bar)
document.getElementById("b").style.height=document.body.clientHeight - 55;
//40的由来TopDIV的top+height
document.getElementById("c").style.height=document.body.clientHeight - 40;
}
</script>

</head>
<body onresize="setStyle();" onLoad="setStyle();" >

<div id='a' class="TopDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>

<div id='b' class="LeftDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
<div id='c' onscroll="document.getElementById('b').scrollTop = this.scrollTop;document.getElementById('a').scrollLeft = this.scrollLeft;"
class="MainDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
</body>
</html>

The use of scroll bars is very common, its related knowledge is also quite a lot, I hope that they can continue to learn, constantly sum up, so that their learning ability and learning efficiency can have a certain improvement.