html滚动条样式设置示例

发布时间:2020-04-03编辑:脚本学堂
本文介绍了html滚动条样式的设置方法,div滚动条设置,在单元格或图层中出现滚动条,javascript改变框架中滚动条的样式,比如改变颜色、改为平面效果等,需要的朋友参考下。

html滚动条样式设置方法

1、div滚动条设置
 

<body style="overflow-x:hidden;overflow-y:hidden">

2、在单元格或图层中出现滚动条
 

<div style="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=false onselectstart="return false">