怎样给图层加滚动条

来源:互联网 发布:网络教育免考英语吗 编辑:程序博客网 时间:2024/06/11 11:19

今天,我做了一个小的网页相册,遇见了一些小的问题,怎样给表格上加滚动条,怎样给图层加滚动条,不会了,遇见问题,在网上查到的!!!

真的是有事找百度!!!

接下来是怎样给图层上加滚动条的代码:

 

1)隐藏滚动条
<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坐标
(4)屏蔽选择,右键等
<body oncontextmenu=self.event.returnValue=false onselectstart="return false">

 


overflow:auto的问题

语法:
overflow-x: visible | auto | hidden | scroll
参数:
visible: 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的宽度。
auto: 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden: 不显示超过对象宽度的内容
scroll: 总是显示横向滚动条
overfolw-y与上面overflow-x相似,想要固定垂直高度,出现垂直滚动条的话,只要定义高度和overfolw-y的属性就可以了。

摘自百度空间,黑男孩。

贴来学习。

 

 

例:

以下样式在FF下会失效,IE中可用
overflow:auto;
height:160px;
width:150px;
scrollbar-face-color: #f1f1f1;
scrollbar-shadow-color: #ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color: #ffffff; 
scrollbar-darkshadow-color: #ffffff;
scrollbar-track-color:#ffffff;
scrollbar-arrow-color: ffffff;

**********************************************************
据基准颜色自动调整 [Base]:scrollbar-base-color: Blue;
表面颜色 [Face]:scrollbar-face-color: CornflowerBlue;
底板轨迹颜色 [Track]:scrollbar-track-color: AliceBlue;
两端箭头颜色 [Arrow]:scrollbar-arrow-color: AliceBlue;
上/左边沿亮边颜色 [3dlight]:scrollbar-3dlight-color: Azure;
下/右边沿颜色 [Darkshadow]:scrollbar-darkshadow-color: AntiqueWhite;
上/左斜面亮边框颜色 [Highlight]:scrollbar-highlight-color: Beige;
下/右斜面暗边框颜色 [Shadow]:scrollbar-shadow-color: Cornsilk;
*************************************************************

 


 

原创粉丝点击