HTML scroll bar style code and usage techniques

May 03, 2021 HTML

2. HTML various scrolling property codes

3. Html The scroll bar color setting method is described

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


      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


      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:

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

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


        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:color ; 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

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 of the origin 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 of the origin 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.

HTML scroll bar style code and usage techniques

Table of contents

scroll bar property settings in html

HTML various scrolling property codes

Html The scroll bar color setting method is described

Html Tips for using scroll bars

Cookie Consent