search

Home  >  Article  >  Web Front-end  >  What are the tips for using scroll bars in HTML?

What are the tips for using scroll bars in HTML?

php中世界最好的语言
php中世界最好的语言Original
2018-02-12 10:15:342711browse

This time I will bring you some tips for using scroll bars in HTML, and notes on using scroll bars in HTML. The following is a practical case, let’s take a look.

I would like to say that one 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 which is very inhumane. Then How is this achieved? In fact, the method is very simple, just add MaintainScrollPositionOnPostback = "true" to the top part of the .aspx source code.

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

<bodystyle="
overflow-x
:hidden;overflow-y:hidden">

(2)How to appear scroll bars in cells or layers


<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 or changing it to a flat effect Wait

<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>

Instructions:

scrollbar-3dlight-color:color; Set or retrieve the scroll bar bright border color;
scrollbar-highlight-color:color; Set or retrieve the scroll bar 3D The bright edge color of the interface;
scrollbar-face-color:color; Set or retrieve the color of the scroll bar 3D surface;
scrollbar-arrow-color:color; Set or retrieve the color of the scroll bar direction arrow; when scrolling This property is invalid when the bar appears but is unavailable;
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 dark color 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, OK It is 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: Set or get 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.
oncontextmenu=self.event.returnValue=falseonselectstart="return false"> ; The following small example is to automatically set the scroll bar according to the size of the form

<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() 
{ 
//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; 
} 
</script> 
  
</head> 
<body onresize="setStyle();" onLoad="setStyle();"> 
  
<div id=&#39;a&#39; class="TopDIV"> 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
</div> 
  
<div id=&#39;b&#39; class="LeftDIV"> 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
</div> 
<div id=&#39;c&#39; onscroll="document.getElementById(&#39;b&#39;).scrollTop = this.scrollTop;document.getElementById(&#39;a&#39;).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, and there is quite a lot of related knowledge about it. I hope you can You can continuously learn and summarize, so that your learning ability and learning efficiency can be improved to a certain extent.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to php Chinese website Other related articles!

Related reading:

How to implement the input text box and img verification code

htmlHow to implement mouse hover Prompt A tag content

How to use the trigger method to pop up the file selection dialog box without clicking the file type input

The above is the detailed content of What are the tips for using scroll bars in HTML?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to create input text box and img verification codeNext article：How to create input text box and img verification code

Related articles

See more