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)
Recommend
How to remove the underline of a hyperlink using three simple examples
To remove the underline of a hyperlink, you need t...
Summary of WEBAPP development skills (notes for mobile website development)
1. To develop web responsively, the page must ada...
HTML+CSS+JS sample code to imitate the brightness adjustment effect of win10
HTML+CSS+JS imitates win10 brightness adjustment ...
CSS Reset style reset implementation example
Introduction: All browsers come with default styl...
Several ways to solve the problem of floating causing the height of the parent element to collapse in CSS
In the past, float was often used for layout, but...
Pure CSS meteor shower background sample code
GitHub address, you can star it if you like it Pl...
Detailed explanation of MySQL date addition and subtraction functions
1. addtime() Add the specified number of seconds ...
How to use commands in Mysql to achieve hierarchical search help detailed explanation
Preface This article mainly introduces the releva...
IDEA configuration process of Docker
IDEA is the most commonly used development tool f...
Implementation of Docker deployment of web projects
The previous article has installed the docker ser...
Several common methods of sending requests using axios in React
Table of contents Install and introduce axios dep...
Implementation of one-click TLS encryption for docker remote api
Table of contents 1. Change the 2375 port of Dock...
Vue.js handles Icon icons through components
Icon icon processing solution The goal of this re...
Mysql varchar type sum example operation
Some friends, when learning about databases, acci...
HTML+jQuery to implement a simple login page
Table of contents Introduction Public code (backe...