css中设置scroll的颜色
直接粘代码拉,这个仅仅适用于IE 转载请注明 http://netsos.cnblogs.com/
div
{
scrollbar-3dlight-color:#000000;
scrollbar-highlight-color:#cccccc;
scrollbar-face-color:#000000;
scrollbar-arrow-color:#ffffff;
scrollbar-shadow-color:#666666;
scrollbar-darkshadow-color:#999999;
scrollbar-track-color:#dddddd;
height:100px;
width:400px;
padding:100px 0 0 0;
border:1px solid #666666;
overflow:scroll;
}
</style>
</head>
<body>
<div>这里是元素内容部分<br />
{
scrollbar-3dlight-color:#000000;
scrollbar-highlight-color:#cccccc;
scrollbar-face-color:#000000;
scrollbar-arrow-color:#ffffff;
scrollbar-shadow-color:#666666;
scrollbar-darkshadow-color:#999999;
scrollbar-track-color:#dddddd;
height:100px;
width:400px;
padding:100px 0 0 0;
border:1px solid #666666;
overflow:scroll;
}
</style>
</head>
<body>
<div>这里是元素内容部分<br />
这里是元素内容部分<br />
这里是元素内容部分<br />
这里是元素内容部分<br />
这里是元素内容部分<br />
这里是元素内容部分<br />
这里是元素内容部分<br />
这里是元素内容部分<br />
</div>
</body>
</body>
火狐的还没试呢，看看吧
强制Firefox显示滚动条：
方法一：html {overflow:-moz-scrollbars-vertical;}
方法二：html {min-height:101%;}
为什么要强制显示滚动条？因为在Firefox你会发现页面在没有加载完全的时候是没有滚动条的，当加载完成后滚动条才显示出来，所以会感觉页面偏移了下。
转载请注明 http://netsos.cnblogs.com/
另辟蹊径：使用Jquery
<script type=”text/javascript” src=”jquery-1.1.3.1.js”></script>
<script type=”text/javascript” src=”jquery.linscroll.js” ></script>
<script type=”text/javascript”>
$(document).ready(
function(){
$(‘#smsContent’).setScroll( //可根据DIV的ID，class进行控制显示。
{img:'scroll_bk.gif’,width:10},//background-image and width
{img:'scroll_arrow_up.gif’,height:3},//up image
{img:'scroll_arrow_down.gif’,height:3},//down image
{img:'scroll_bar.gif’,height:25}//bar image
);
}
);
</script>
Html代码：
<div id=”smsContent” style=”width:140px;overflow:hidden;height:170px;”>
一名黑客日前宣称,他已经破解了苹果CE名黑客自称“orin0co”.他表示,他通过钓 鱼的方式获取了乔布斯在亚马逊上的账号密码.历史记录显示,乔布斯过去10年中在亚马逊上购买了2万件商
</div>
此插件最大的好处可自定义滚动条的样式，自己加工几张图片就可以了。而且在DIV的内容不超过预设置高度的时候，不会出现滚动条。
<script type=”text/javascript” src=”jquery.linscroll.js” ></script>
<script type=”text/javascript”>
$(document).ready(
function(){
$(‘#smsContent’).setScroll( //可根据DIV的ID，class进行控制显示。
{img:'scroll_bk.gif’,width:10},//background-image and width
{img:'scroll_arrow_up.gif’,height:3},//up image
{img:'scroll_arrow_down.gif’,height:3},//down image
{img:'scroll_bar.gif’,height:25}//bar image
);
}
);
</script>
Html代码：
<div id=”smsContent” style=”width:140px;overflow:hidden;height:170px;”>
一名黑客日前宣称,他已经破解了苹果CE名黑客自称“orin0co”.他表示,他通过钓 鱼的方式获取了乔布斯在亚马逊上的账号密码.历史记录显示,乔布斯过去10年中在亚马逊上购买了2万件商
</div>
此插件最大的好处可自定义滚动条的样式，自己加工几张图片就可以了。而且在DIV的内容不超过预设置高度的时候，不会出现滚动条。
http://blog.gaoso.com.cn/2009/05/401.html 让我下载，好像还要收一毛钱，艾！～～～～～～～～～～～～
转载请注明 http://netsos.cnblogs.com/
还有一个 从其他论坛靠下来的
把它放到一个css文件中
@-moz-document url-prefix(http://),url-prefix(https://) {
/* 滚动条颜色 */
scrollbar {
-moz-appearance: none !important;
background: #00ff00 !important;
}
/* 滚动条按钮颜色 */
thumb,scrollbarbutton {
-moz-appearance: none !important;
background-color: #0000ff !important;
}
/* 鼠标悬停时按钮颜色 */
thumb:hover,scrollbarbutton:hover {
-moz-appearance: none !important;
background-color: #ff0000 !important;
}
/* 隐藏上下箭头 */
scrollbarbutton {
display: none !important;
}
/* 纵向滚动条宽度 */
scrollbar[orient="vertical"] {
min-width: 15px !important;
}
}
/* 滚动条颜色 */
scrollbar {
-moz-appearance: none !important;
background: #00ff00 !important;
}
/* 滚动条按钮颜色 */
thumb,scrollbarbutton {
-moz-appearance: none !important;
background-color: #0000ff !important;
}
/* 鼠标悬停时按钮颜色 */
thumb:hover,scrollbarbutton:hover {
-moz-appearance: none !important;
background-color: #ff0000 !important;
}
/* 隐藏上下箭头 */
scrollbarbutton {
display: none !important;
}
/* 纵向滚动条宽度 */
scrollbar[orient="vertical"] {
min-width: 15px !important;
}
}
转载请注明 http://netsos.cnblogs.com/
