在各浏览器中自定义滚动条样式

关注

转载最新推荐文章于 2024-10-29 19:01:18 发布 2.1k 阅读 AI 写同款· GEO 优化 ›

终于搞定！Cloudflare Tunnel 报错 Error 1033，一次完整修复记录最近遇到了 Cloudflare Tunnel Error 1033 报错的问题，本文记录了完整的排查和解决方案💡 阅读详情

  IE浏览器中自定义滚动条样式：
 
 HTML {   
 scrollbar-base-color: #C0C0C0;   
 scrollbar-base-color: #C0C0C0;   
 scrollbar-3dlight-color: #C0C0C0;   
 scrollbar-highlight-color: #C0C0C0;   
 scrollbar-track-color: #EBEBEB;   
 scrollbar-arrow-color: black;   
 scrollbar-shadow-color: #C0C0C0;   
 scrollbar-dark-shadow-color: #C0C0C0;   
 }  

解释：
介绍一下涉及浏览器滚动条的样式表内容（某些样式需ie5.5+才能支持）：
1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条）
overflow-x水平方向内容溢出时的设置
overflow-y垂直方向内容溢出时的设置
以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

2．scrollbar-3d-light-color立体滚动条亮边的颜色（设置滚动条的颜色）
scrollbar-arrow-color上下按钮上三角箭头的颜色
scrollbar-base-color滚动条的基本颜色
scrollbar-dark-shadow-color立体滚动条强阴影的颜色
scrollbar-face-color立体滚动条凸出部分的颜色
scrollbar-highlight-color滚动条空白部分的颜色
scrollbar-shadow-color立体滚动条阴影的颜色

  CHROME浏览器中自定义滚动条样式：
 
 ::-webkit-scrollbar { width: 3px; height: 3px;}   
 ::-webkit-scrollbar-track-piece { background-color: #ffffff;}   
 ::-webkit-scrollbar-thumb{height: 50px; background-color: #666; -webkit-border-radius: 3px;}  

解释：
::-webkit-scrollbar 滚动条宽跟高
::-webkit-scrollbar-track-piece 滚动条样式底部内层样式
::-webkit-scrollbar-thumb 滚动条滑块样式
-webkit-border-radius: 滚动条滑块边角–导圆角

  FireFox下自定义滚动条：(或许有些问题，参考
  http://g.mozest.com/thread-38113-1-1
  )
 
 @-moz-document url-prefix(http://),url-prefix(https://) {   
 /* 滚动条颜色 */  
 scrollbar {   
    -moz-appearance: none !important;   
    background: rgb(0,255,0) !important;   
 }   
 /* 滚动条按钮颜色 */  
 thumb,scrollbarbutton {   
    -moz-appearance: none !important;   
    background-color: rgb(0,0,255) !important;   
 }   
 /* 鼠标悬停时按钮颜色 */  
   
 thumb:hover,scrollbarbutton:hover {   
    -moz-appearance: none !important;   
    background-color: rgb(255,0,0) !important;   
 }   
 /* 隐藏上下箭头 */  
 scrollbarbutton {   
    display: none !important;   
 }   
 /* 纵向滚动条宽度 */  
 scrollbar[orient="vertical"] {   
   min-width: 15px !important;   
 }   
 }  

FF下用JS实现自定义滚动条：

  JS
 
 <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(){    
 $(’#scrollContent’).setScroll( //scrollContent为滚动层的ID 
 {img:scroll_bk.gif’,width:10},//背景图及其宽度    
 {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=“scrollContent” style=“width:140px;overflow:hidden;height:170px;”>内容</div>  

收录于

CSS

《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(二) 《拉依达的嵌入式\驱动面试宝典》整合了所有我认为可能遇到的技术面试问题。所有问题及其答案均是我个人学习后查阅资料总结，每个回答都做了仔细的分析，在嵌入式及其驱动面试相关问题解析做到全网独一无二。学习或者转行到嵌入式、驱动开发领域学习的不二之选阅读详情

在各浏览器中自定义滚动条样式

相关推荐