CSS 滚动条样式跨浏览器

如何跨浏览器定义 CSS 滚动条样式？我测试了这段代码，它只能在 IE 和 Opera 中工作，但在 Chrome、 Safari 和 Firefox 中失败了。

<style type="text/css">
<!--
body {
scrollbar-face-color: #000000;
scrollbar-shadow-color: #2D2C4D;
scrollbar-highlight-color:#7D7E94;
scrollbar-3dlight-color: #7D7E94;
scrollbar-darkshadow-color: #2D2C4D;
scrollbar-track-color: #7D7E94;
scrollbar-arrow-color: #C1C1D1;
}
-->
</style>
617744 次浏览
小开
最佳答案

滚动条 CSS 样式是微软开发人员发明的一种奇怪的东西。它们不是 CSS 的 W3C 标准的一部分，因此大多数浏览器只是忽略它们。

小开

JScrollPane 是跨浏览器滚动条的一个很好的解决方案，并且可以很好地降级。

小开

从 IE6开始，我相信你不能使用这些属性来定制滚动条。上面链接到的 Chris Coyier 文章详细介绍了 webkit 专有 css 用于定制滚动条的选项。

如果你真的想要一个跨浏览器的解决方案，你可以完全自定义，你将不得不使用一些 JS。下面是一个名为 FaceScroll 的漂亮插件的链接: http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm

小开

Webkit 对滚动条的支持是 非常成熟。这个 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);
}

这个回答 是额外信息的极好来源。

小开

尝试这一点，它是非常容易使用和测试的 IE 和 Safari 和 FF，工作良好，除了不需要很多 div周围它只需添加 id，它将工作良好，在你链接你的 Js 和 CSS 文件。自定义滚动条

希望能帮上忙

剪辑 步骤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: 然后在页面的主体中，将下面的示例 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>


<br />


<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>
小开

Nano ScrollerJS 只是简单的使用。我总是使用它们..。

Browser compatibility:
  • IE7+
  • Firefox 3+
  • Chrome
  • Safari 4+
  • Opera 11.60+
Mobile browsers support:
  • IOS5 + (iPhone，iPad 和 iPod Touch)
  • IOS4(带填充物)
  • 安卓火狐
  • Android 2.2/2.3本地浏览器(带有一个 polyfill)
  • Android Opera 11.6(带填充物)

文档中的代码示例,

  1. 标记-需要以下类型的标记结构才能使插件正常工作。
<div id="about" class="nano">
<div class="nano-content"> ... content here ...  </div>
</div>

提交答案