滚动条样式
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(){}//滚动时候触发的方法
});