Sharing tips on using scroll bars in HTML_HTML/Xhtml_Web page production-HTML Tutorial-php.cn

Today when I was studying the Beef Brisket press release system, Mr. Beef Bristle talked about some knowledge about scroll bars. He didn’t mention much about them. It only touched on part of the knowledge about scroll bars. If you want to study in depth, these are not enough. You have to collect some relevant knowledge yourself. Knowledge I would like to say that a common phenomenon must be common to everyone, that is, when deleting something on a web page, the scroll bar is often still at the position before deleting the thing, instead of running to the top of the page in a very inhumane manner, then this How is it 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 picture below: The above phenomenon was encountered when learning the Brisket news release system. Let me share with you some other tips on using HTML scroll bars (1) Hide scroll bars (2) How to appear scroll bars in cells or layers (3)javascript changes the style of the scroll bar in the frame, such as changing the color or changing it to flat Effects, etc. 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;} &lt ;/STYLE> Description: scrollbar-3dlight-color:color; Set or retrieve the scroll bar bright border color; scrollbar-highlight-color:color; Set or retrieve the scroll bar The bright edge color of the scroll bar 3D interface; scrollbar-face-color:color; Sets or retrieves the color of the scroll bar 3D surface; scrollbar-arrow-color:color; Sets or retrieves the color of the scroll bar direction arrow; When the scroll bar appears but is unavailable, this property is invalid; scrollbar-shadow-color:color; Sets or retrieves the dark edge color of the scroll bar 3D interface; scrollbar-darkshadow-color:color; Sets or retrieves the scroll bar Bar dark border color; scrollbar-base-color:color; Set or retrieve the base color of the scroll bar. Other interface colors will be automatically adjusted accordingly. scrollbar-track-color:color; Set or retrieve the color of the scroll bar’s dragging area Note: color is the color code you want to set, which can be hexadecimal , such as #FF0000, can be expressed in RGB, such as rgb(255,0,255); when setting the scroll bar style, it is not necessary to use all the attributes for it to take effect. (4) Positioning of page elements in JavaScript clientX, clientY are the 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 are the mouse The current position relative to a certain area in the web page. When the mouse is located in the upper left corner of this area on the page, offsetX=0, offsetY=0; screenX, screenY are the positions of the mouse relative to the user's entire screen; x, y are the current position of the mouse relative to the current browser scrollLeft: Set or get the distance between the left edge of the object and the leftmost end of the currently visible content in the window (because of the generation of the scroll bar, the current page It can be seen that the content 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: X coordinate of the object relative to the page. top: Y coordinate of the object relative to the page (5) Shield selection, right click, etc. The following This small example is to automatically set the scroll bar according to the size of the form

Copy the code The code is as follows: .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 } function setStyle() { //145的由来LeftDiv的left width 15（15是滚动条的宽度） document.getElementById("a").style.width=document.body.clientWidth - 145; //130的由来LeftDiv的left width document.getElementById("c").style.width=document.body.clientWidth - 130; //55的由来TopDIV的top height 15（15是滚动条的宽度） document.getElementById("b").style.height=document.body.clientHeight - 55; //40的由来TopDIV的top height document.getElementById("c").style.height=document.body.clientHeight - 40; } 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ class="MainDIV"> 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ The use of scroll bars is very common, and there is quite a lot of related knowledge about it. I hope that I can continue to learn and summarize, so that my learning ability and learning efficiency can be improved to a certain extent.