Sharing tips on using scroll bars in HTML

Today, when we were learning about the Niu Nan news release system, Teacher Niu Nan talked about some knowledge about scroll bars. Not much was mentioned, and only part of the knowledge about scroll bars was involved. If you want to study in depth, these are not enough. You have to collect some relevant knowledge yourself. I will tell you a phenomenon that everyone must be familiar with. That is, when you delete something on a web page, the scroll bar is often still in the position before deleting something, instead of running to the top of the page in a very inhumane way. So how is this achieved? In fact, the method is very simple. You only need to add MaintainScrollPositionOnPostback = "true" to the top part of the .aspx source code. See the figure below:

The above phenomenon is what I encountered when I was learning the Niu Nan news publishing system. Here I will share with you some other tips on how to use HTML scroll bars.
(1) Hide the scroll bar
<bodystyle="overflow-x:hidden;overflow-y:hidden">
(2) How to make a scroll bar appear 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, changing to a flat 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>
illustrate:
scrollbar-3dlight-color:color; Set or retrieve the scroll bar light border color;
scrollbar-highlight-color:color; Set or retrieve the bright edge color of the scrollbar 3D interface;
scrollbar-face-color:color; Sets or retrieves the color of the scrollbar 3D surface;
scrollbar-arrow-color:color; Set or retrieve the color of the scroll bar direction arrow; when the scroll bar appears but is unavailable, this property is invalid;
scrollbar-shadow-color:color; Set or retrieve the dark edge color of the scrollbar 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 automatically adjust accordingly.
scrollbar-track-color:color; Set or retrieve the color of the scroll bar's drag area
Remark:
color is the color code you want to set, which can be in hexadecimal, such as #FF0000, or in RGB, such as rgb(255,0,255). When setting the scroll bar style, you do not have to use all the attributes for it to take effect.
(4) Page element positioning 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, clientY=0.
offsetX and offsetY are the current position of the mouse relative to a certain area on the web page. When the mouse is in the upper left corner of this area on the page, offsetX=0 and offsetY=0.
screenX and screenY are the positions 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: Sets or gets the distance between the left border of the object and the leftmost end of the currently visible content in the window (because of the generation of the 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) Shield selection, right click, etc.
<body oncontextmenu=self.event.returnValue=falseonselectstart="return false">
The following small example is to realize the scroll bar automatically set 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">
  .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
  }
.MainDIV
  { 
     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 origin of 145 is 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 LeftDiv's left+width
document.getElementById("c").style.width=document.body.clientWidth - 130;
//The origin of 55 is the top+height+15 of TopDIV (15 is the width of the scroll bar)
document.getElementById("b").style.height=document.body.clientHeight - 55;
//The origin of 40 is the top+height of TopDIV
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>

The use of scroll bars is very common, and there is a lot of knowledge about them. I hope that I can continue to learn and summarize, so that my learning ability and efficiency can be improved to a certain extent.

<<: Detailed explanation of Vue's calculated properties

>>: CSS3 solution to the problem of freezing on mobile devices (animation performance optimization)

Multiple methods to modify MySQL root password (recommended)

A quick solution to the problem that there is no data directory and my-default.ini in the unzipped package of Windows 64-bit MySQL 5.7 or above, and the service cannot be started (problem summary)

Blog

Sharing tips on using scroll bars in HTML

Multiple methods to modify MySQL root password (recommended)

Detailed explanation of the limitations and restrictions of MySQL partitioned tables

Getting Started Tutorial on Animating SVG Path Strokes Using CSS3

Solution to the failure of entering the container due to full docker space

Linux uses bond to implement dual network cards to bind a single IP sample code

How to reduce memory usage and CPU usage of web pages

Solution to the problem of Access denied for user'root'@'localhost' (using password: YES) in MySQL 8.0 login under win10

Nginx service 500: Internal Server Error one of the reasons

Several popular website navigation directions in the future

A quick solution to the problem that there is no data directory and my-default.ini in the unzipped package of Windows 64-bit MySQL 5.7 or above, and the service cannot be started (problem summary)

Recommend

It is not recommended to copy the content in Word directly to the editor on the website.

Summary of javascript date tools

Analysis of Alibaba Cloud CentOS7 server nginx configuration and FAQs

Detailed explanation of the update command for software (library) under Linux

A tutorial on how to install, use, and automatically compile TypeScript

How to customize an EventEmitter in node.js

Detailed explanation of eight methods to achieve CSS page bottom fixed

Detailed explanation of Apache SkyWalking alarm configuration guide

Using vue3 to imitate the side message prompt effect of Apple system

How to reset the password if the Ubuntu 18.04 server password is forgotten or tampered with

Five solutions to cross-browser problems (summary)

Pure CSS3 to achieve beautiful input input box animation style library (Text input love)

How to use React slots

JavaScript programming through Matlab centroid algorithm positioning learning

Detailed explanation of mysql5.6 master-slave setup and asynchronous issues