HTML ---滚动条样式代码及使用技巧

html中滚动条属性设置scrollbar属性、样式详解
1、overflow内容溢出时的设置(设定被设定对象是否显示滚动条)
    overflow-x水平方向内容溢出时的设置
    overflow-y垂直方向内容溢出时的设置
    以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。


2、 scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色)
    scrollbar-arrow-color上下按钮上三角箭头的颜色
    scrollbar-base-color滚动条的基本颜色
    scrollbar-dark-shadow-color立体滚动条强阴影的颜色
    scrollbar-face-color立体滚动条凸出部分的颜色
    scrollbar-highlight-color滚动条空白部分的颜色
    scrollbar-shadow-color立体滚动条阴影的颜色 1.让浏览器窗口永远都不出现滚动条

没有水平滚动条

没有垂直滚动条

没有滚动条
style="overflow:hidden">


2.设定多行文本框的滚动条

没有水平滚动条


没有垂直滚动条


没有滚动条




3.设定窗口滚动条的颜色

设置窗口滚动条的颜色为红色
scrollbar-base-color设定的是基本色,一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。
加上一点特别的效果:



4.在样式表文件中定义好一个类,调用样式表。



这样调用:


Scrollbar-Face-Color为滚动条表面颜色设定;
Scrollbar-Highlight-Color为滚动条上斜面和左斜面颜色设定;
Scrollbar-Shadow-Color为滚动条下斜面和右斜面颜色设定;
Scrollbar-3Dlight-Color为滚动条上边和左边的边沿颜色设定;
Scrollbar-Arrow-Color为滚动条两端箭头颜色设定。
Scrollbar-Track-Color为滚动条底板颜色设定;
Scrollbar-Darkshadow为滚动条下边和右边边沿颜色设定。

举例:

 <textarea style="width:330px; overflow:scroll; overflow-x:hidden;"></textarea>

备注框

HTML各种滚动属性代码

<marquee>普通卷动</marquee> <br />   
<marquee behavior=slide>滑动</marquee>  <br />  
<marquee behavior=alternate>来回卷动 </marquee><br /> 
<marquee direction=down>向下卷动</marquee> <br /> 
<marquee direction=up>向上卷动</marquee> <br /> 
<marquee direction=right>向右卷动</marquee> <br /> 
<marquee direction=left>向左卷动</marquee> <br /> 
<marquee loop=2>卷动次数</marquee> <br />   
<marquee scrollamount=30>设定卷动距离</marquee> <br /> 
 

html滚动条颜色设置方法介绍

scrollbar-arrow-color: color; /*三角箭头的颜色*/
scrollbar-face-color: color; /*立体滚动条的颜色(包括箭头部分的背景色)*/
scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: color; /*滚动条的高亮颜色(左阴影?)*/
scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
scrollbar-track-color: color; /*立体滚动条背景颜色*/
scrollbar-base-color: color; /*滚动条的基色*/


webkit不再是用简单的几个CSS属性,而是一坨的CSS伪元素:
-webkit-scrollbar 滚动条整体部分
-webkit-scrollbar-button 滚动条两端的按钮
-webkit-scrollbar-track 外层轨道
-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
-webkit-scrollbar-thumb (拖动条?滑块?滚动条里面可以拖动的那个,肿么翻译好呢?)
-webkit-scrollbar-corner 边角
-webkit-resizer 定义右下角拖动块的样式

 

 

html滚动条的使用技巧

(1)隐藏滚动条

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

 

(2)如何在单元格或图层中出现滚动条

<divstyle="width:200px;height:200px;overflow-x:auto;overflow-y:auto;"></div>

 

(3)javascript改变框架中滚动条的样式,比如改变颜色、改为平面效果等

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

  

说明:  

scrollbar-3dlight-color:color;设置或检索滚动条亮边框颜色;  

scrollbar-highlight-color:color;设置或检索滚动条3D界面的亮边颜色;  

scrollbar-face-color:color;设置或检索滚动条3D表面的颜色;  

scrollbar-arrow-color:color;设置或检索滚动条方向箭头的颜色;当滚动条出现但不可用时,此属性失效;   

scrollbar-shadow-color:color;设置或检索滚动条3D界面的暗边颜色;  

scrollbar-darkshadow-color:color;设置或检索滚动条暗边框颜色;  

scrollbar-base-color:color;设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。   

scrollbar-track-color:color;设置或检索滚动条的拖动区域颜色   

 

备注:  

color为你要设置的颜色代码,可以是16进制的,比如#FF0000,可以是以RGB表示的,比如rgb(255,0,255);设置滚动条样式的时候不必要把所有的属性都用上才会生效。

 

(4)javascript中的页面元素定位

clientX、clientY是鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0;

offsetX、offsetY是鼠标当前相对于网页中的某一区域的位置,当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0;

screenX、screenY是鼠标相对于用户整个屏幕的位置;

x、y是鼠标当前相对于当前浏览器的位置

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离(因为有滚动条的产生,所以目前页面可见内容是不定的)。

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。

left:对象相对于页面的X坐标。

top:对象相对于页面的Y坐标

 

(5)屏蔽选择,右键等

<body oncontextmenu=self.event.returnValue=falseonselectstart="return false">

 

相关内容推荐