How to use scroll bar in HTML

Time:2021-1-14

Today, when learning the beef brisket news release system, the beef brisket teacher talked about some knowledge of the scroll bar, which was not mentioned much, but only involved part of the knowledge of the scroll bar. If you want to further study, these are not enough, you have to collect some relevant knowledge yourself
I say a common phenomenon, that is, when deleting something in a web page, the scroll bar is always in the position before deleting something, instead of running to the top of that page in a very inhuman way. How can this be realized? In fact, the method is very simple, just add maintainscrollposition onpostback in the top part of the. ASPX source code. See the figure below:
 
The above phenomenon is encountered when learning the beef brisket news release system. Let’s share some other tips about using HTML scroll bar
(1) Hide scroll bar
<bodystyle=”overflow-x:hidden;overflow-y:hidden”>
(2) How to scroll bar in 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, changing to the 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>
explain:
scrollbar-3dlight- color:color; Set or retrieve the color of the bright border of the scroll bar;
scrollbar-highlight- color:color; Set or retrieve the bright edge color of the scroll bar 3D interface;
scrollbar-face- color:color; Set or retrieve the color of the 3D surface of the scroll bar;
scrollbar-arrow- color:color; Sets or retrieves the color of the direction arrow of the scroll bar. This property is invalid when the scroll bar appears but is not available;
scrollbar-shadow- color:color; Set or retrieve the dark edge color of scroll bar 3D interface;
scrollbar-darkshadow- color:color; Set or retrieve the scroll bar dark border color;
scrollbar-base- color:color; Sets or retrieves the scroll bar base color. Other interface colors will be automatically adjusted accordingly.
scrollbar-track- color:color; Sets or retrieves the color of the scroll bar’s drag area
remarks:
Color is the color code you want to set, which can be hexadecimal, such as # ff0000, which can be expressed in RGB, such as RGB (255,0255); when setting the scroll bar style, it is not necessary to use all the attributes to take effect.
(4) Positioning of page elements in JavaScript
Clientx and clienty are the current position of the mouse relative to the web page. When the mouse is in the upper left corner of the page, clientx = 0 and clienty = 0;
Offsetx and offsety are the current position of the mouse relative to an area in the web page. When the mouse is located in the upper left corner of this area in the page, offsetx = 0 and offsety = 0;
Screen X and screen y are the positions of the mouse relative to the user’s whole screen;
x. Y is the current position of the mouse relative to the current browser
Scrollleft: set or get the distance between the left boundary of the object and the leftmost end of the currently visible content in the window (because of the generation of scroll bar, the currently visible content of the page is uncertain).
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 coordinate of the object relative to the page.
Top: the Y coordinate of the object relative to the page
(5) Screen selection, right click, etc
<body oncontextmenu=self.event.returnValue=falseonselectstart=”return false”>
The following small example is to realize the automatic setting of scroll bar according to the size of the form

Copy code

The code is as follows:

<SPAN style=”FONT-SIZE: 18px”><html>
<head>
<style type=”text/css”>
&nbsp; .TopDIV
&nbsp; {&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp; position:absolute;
&nbsp;&nbsp;&nbsp;&nbsp; left:130px;
&nbsp;&nbsp;&nbsp;&nbsp; top:10px;
&nbsp;&nbsp;&nbsp;&nbsp; width:105;
&nbsp;&nbsp;&nbsp;&nbsp; height:30;
&nbsp;&nbsp;&nbsp;&nbsp; overflow-x:hidden;
&nbsp;&nbsp;&nbsp;&nbsp; overflow-y:auto;
&nbsp;&nbsp;&nbsp;&nbsp; float: right;
&nbsp;&nbsp;&nbsp;&nbsp; border-style.:solid;
&nbsp;&nbsp;&nbsp;&nbsp; border-width:;
&nbsp;&nbsp;&nbsp;&nbsp; border-color:red
&nbsp; }
&nbsp; .LeftDIV
&nbsp; {&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp; position:absolute;
&nbsp;&nbsp;&nbsp;&nbsp; left:10px;
&nbsp;&nbsp;&nbsp;&nbsp; top:40px;
&nbsp;&nbsp;&nbsp;&nbsp; width:120;
&nbsp;&nbsp;&nbsp;&nbsp; height:60;
&nbsp;&nbsp;&nbsp;&nbsp; overflow-x:hidden;
&nbsp;&nbsp;&nbsp;&nbsp; overflow-y:hidden;
&nbsp;&nbsp;&nbsp;&nbsp; float: right;
&nbsp;&nbsp;&nbsp;&nbsp; border-style.:solid;
&nbsp;&nbsp;&nbsp;&nbsp; border-width:;
&nbsp;&nbsp;&nbsp;&nbsp; border-color:yellow
&nbsp; }
&nbsp; .MainDIV
&nbsp; {&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp; position:absolute;
&nbsp;&nbsp;&nbsp;&nbsp; left:130px;
&nbsp;&nbsp;&nbsp;&nbsp; top:40px;
&nbsp;&nbsp;&nbsp;&nbsp; width:120;;
&nbsp;&nbsp;&nbsp;&nbsp; height:80;
&nbsp;&nbsp;&nbsp;&nbsp; overflow-x:auto;
&nbsp;&nbsp;&nbsp;&nbsp; overflow-y:auto;
&nbsp;&nbsp;&nbsp;&nbsp; float: right;
&nbsp;&nbsp;&nbsp;&nbsp; border-style.:solid;
&nbsp;&nbsp;&nbsp;&nbsp; border-width:;
&nbsp;&nbsp;&nbsp;&nbsp; border-color:blue
&nbsp; }
</style>
<script type=”text/javascript” language=”javascript”>
function setStyle()
{
//145 from leftdiv’s left + width + 15 (15 is the width of the scroll bar)
document.getElementById(“a”).style.width=document.body.clientWidth – 145;
//The origin of 130 is left + width of leftdiv
document.getElementById(“c”).style.width=document.body.clientWidth – 130;
//55 comes from topdiv’s top + height + 15 (15 is the width of the scroll bar)
document.getElementById(“b”).style.height=document.body.clientHeight – 55;
//The origin of 40 is topdiv’s top + height
document.getElementById(“c”).style.height=document.body.clientHeight – 40;
}
</script>
&nbsp;
</head>
<body onresize=”setStyle();” onLoad=”setStyle();”>
&nbsp;
<div id=’a’>
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
&nbsp;
<div id=’b’>
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;”
&nbsp;class=”MainDIV”>
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
</body>
</html>
</SPAN>

The use of scroll bar is very common, and its related knowledge is also quite a lot. I hope I can constantly summarize in the continuous learning, so that my learning ability and learning efficiency can be improved to a certain extent