这个问题在这里已经有了答案:CSS 自定义滚动条 in div (20 answers) 7 年前关闭。社区在 9 个月前审查了是否重新打开此问题并将其关闭:原始关闭原因未解决
如何定义 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>
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 是额外信息的绝佳来源。
滚动条 CSS 样式是 Microsoft 开发人员发明的一种奇怪的东西。它们不是 CSS 的 W3C 标准的一部分,因此大多数浏览器都会忽略它们。
jScrollPane 是跨浏览器滚动条的一个很好的解决方案,并且可以很好地降级。
nanoScrollerJS 是简单的使用。我总是用它们...
Browser compatibility:
IE7+
火狐 3+
铬合金
野生动物园 4+
歌剧 11.60+
Mobile browsers support:
iOS 5+(iPhone、iPad 和 iPod Touch)
iOS 4(带有 polyfill)
安卓火狐
Android 2.2/2.3 原生浏览器(带有 polyfill)
Android Opera 11.6(带有 polyfill)
文档中的代码示例,
标记 - 需要以下类型的标记结构才能使插件工作。
<div id="about" class="nano">
<div class="nano-content"> ... content here ... </div>
</div>
从 IE6 开始,我相信您无法使用这些属性自定义滚动条。上面链接的 Chris Coyier 文章详细介绍了用于自定义滚动条的 webkit 专有 css 选项。
如果你真的想要一个可以完全自定义的跨浏览器解决方案,你将不得不使用一些 JS。这是一个名为 FaceScroll 的不错插件的链接:http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm
试试这个,它很容易在 IE 和 Safari 和 FF 上使用和测试,并且工作正常,除了不需要很多 div
外,只需添加 id
,它会在你链接 Js 和 Css 文件后正常工作。 FaceScroll Custom scrollbar
希望能帮助到你
编辑步骤 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>
<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>
不定期副业成功案例分享