CSS滚动条样式跨浏览器[重复]

6 回答

• 139

  Scrollbar CSS样式是微软开发人员发明的奇怪之处 . 它们不是CSS的W3C标准的一部分，因此大多数浏览器都忽略它们 .

  回复于 2024-04-20T07:26:50+08:00
• 1

  Webkit对滚动条的支持是quite sophisticated . 这个CSS提供了一个非常小的滚动条，带有浅灰色轨道和一个较暗的拇指：

  ::-webkit-scrollbar
  {
    width: 12px;  /* for vertical scrollbars */
    height: 12px; /* for horizontal scrollbars */
  }
  
  ::-webkit-scrollbar-track
  {
    background: rgba(0, 0, 0, 0.1);
  }
  
  ::-webkit-scrollbar-thumb
  {
    background: rgba(0, 0, 0, 0.5);
  }
  

  This answer是其他信息的绝佳来源 .

  回复于 2024-04-20T07:26:50+08:00
• 31

  jScrollPane是跨浏览器滚动条的一个很好的解决方案，很好地降级 .

  回复于 2024-04-20T07:26:50+08:00
• 0

  nanoScrollerJS只是使用 . 我总是用它们......

  Browser compatibility:
  

  • IE7

  • Firefox 3

  • Chrome

  • Safari 4

  • Opera 11.60

  Mobile browsers support:
  

  • iOS 5（iPhone，iPad和iPod Touch）

  • iOS 4（带有polyfill）

  • Android Firefox

  • Android 2.2 / 2.3原生浏览器（带有polyfill）

  • Android Opera 11.6（带有polyfill）

  文档中的代码示例，

  • 标记 - 需要以下类型的标记结构才能使插件正常工作 .
    ......这里的内容......

  回复于 2024-04-20T07:26:50+08:00
• 9

  从IE6开始，我相信您无法使用这些属性自定义滚动条 . 与上面链接的Chris Coyier文章详细介绍了用于自定义滚动条的webkit专有css的选项 .

  如果您真的想要一个可以完全自定义的跨浏览器解决方案，那么您将不得不使用一些JS . 这是一个很好的插件链接，名为FaceScroll：http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm

  回复于 2024-04-20T07:26:50+08:00
• 107

  尝试这个它很容易在IE和Safari和FF上使用和测试，并且工作得很好，旁边不需要很多 div 只需添加 id 并且它可以正常工作，链接你的Js和Css文件 . FaceScroll Custom scrollbar

  希望能帮助到你

  Edit 第1步：将以下脚本添加到页面部分：

  <link href="general.css" rel="stylesheet" type="text/css">
  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
  <script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>
  
  <script type="text/javascript" src="facescroll.js"></script>
  <script type="text/javascript">
      jQuery(function(){ // on page DOM load
          $('#demo1').alternateScroll();
          $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
      })
  </script>
  

  第2步：然后在页面的BODY中，将以下示例HTML块添加到您的页面 .

  <p><b>Scrollbar (default style) shows onMouseover</b></p>
  
  <div id="demo1" style="width:300px; height:250px; padding:8px; background:lightyellow; border:1px solid gray; resize:both; overflow:scroll">
  
  From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its 
  </div>
  
  
  
  
  <p><b>Scrollbar (alternate style), always shown</b></p>
  
  <div id="demo2" style="width:400px; height:130px; padding:10px; padding-right:8px; background:lightyellow; border:1px solid gray; overflow:scroll; resize:both;">
  
  From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its 
  </div>
  

  回复于 2024-04-20T07:26:50+08:00