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  />
这里是元素内容部分 < 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/

 

 

你可能感兴趣的:(scroll)