css中设置scroll的颜色

依然范特西╮ 提交于 2020-01-25 16:08:10
直接粘代码拉,这个仅仅适用于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 />
这里是元素内容部分<br />
这里是元素内容部分<br />
这里是元素内容部分<br />
这里是元素内容部分<br />
这里是元素内容部分<br />
这里是元素内容部分<br />
这里是元素内容部分<br />
</div>
</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的内容不超过预设置高度的时候,不会出现滚动条。 

 

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;
}
}

 转载请注明 http://netsos.cnblogs.com/

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!