滚动条

滚动条样式

div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll;

table-layout:fixed;word-wrap:break-wrod;word-break:break-all;//自动换行

zoom:0.8;//滚动条的宽细
}

 

SCROLLBAR-FACE-COLOR:#3333FF;(立体滚动条凸出部分的颜色)
SCROLLBAR-HIGHLIGHT-COLOR:#505050;(滚动条空白部分的颜色)
SCROLLBAR-SHADOW-COLOR:#333333;(立体滚动条阴影的颜色)
SCROLLBAR-ARROW-COLOR:#666666;(按钮上三角箭头的颜色)
SCROLLBAR-BASE-COLOR:#333333; (滚动条的基本颜色)
SCROLLBAR-DARK-SHADOW-COLOR:#333333; (立体滚动条强阴影的颜色)

 

 

隐藏滚动条：

方法一：设置CSS属性overflow为hidden。

＜body style="overflow:hidden"＞

方法二：设置body元素的scroll属性为no。

＜body scroll="no"＞

用方法二的话在IE5.0中无法再用脚本对页面进行滚动进行操作。因为方法一只是隐藏滚动条不显示，而方法二是直接设置为没有滚动条

技巧：

如果只想隐藏横向或纵向上的滚动条，可以用overflow-x或overflow-y来设置。

 

 

 

 

将滚动条滚动到指定位置：

window.scrollTo(100,500)；

将滚动条滚于底部：

var div=document.getElementById('div');

div.scrollTop = div.scrollHeight;

jquery更方便：$( '#chats' ).scrollTop($( '#chats' )[0].scrollHeight);

 

美化滚动条：

$("#tt").jscroll();// 默认调用

$("#cc").jscroll({W:"12px"});//设置了滚动条宽度

$("#ee").jscroll({W:"12px",Btn:{btn:false}});//设置了滚动条宽度,去掉了上下按钮（设 置背景用的）

$(".dd ").jscroll({ W:"12px"//设置滚动条宽度
,BgUrl:""//设置滚动条背景图片地址
,Bg:"#ccc"//设置滚动条背景图片position,颜色等
,Bar:{ Pos:"bottom "// 设置滚动条初始化位置在底部
,Bd:{Out:"#000",Hover:"red"}//设置滚动滚轴边框颜色：鼠标离开(默认)，经过
,Bg:{Out:"green",Hover:"#fff",Focus:"orange"}}//设置滚动条滚轴背景：鼠标离开(默认)，经过，点击
,Btn:{ btn:true//是否显示上下按钮 false为不显示
,uBg:{Out:"black",Hover:"#fff",Focus:"orange"}//设置上按钮背景：鼠标离开(默认)，经过，点击
,dBg:{Out:"black",Hover:"#fff",Focus:"orange"}}//设置下按钮背景：鼠标离开(默认)，经过，点击
,Fn:function(){}//滚动时候触发的方法
});