我想更改 Firefox 中的滚动条颜色。我该怎么做?
最佳答案
在 Firefox 中更改滚动条颜色并不像在 Internet Explorer 和 Opera 中那样简单。 Firefox 只允许主题设置滚动条的样式。这是一件好事。很多用户不喜欢界面小部件的外观随设计者的心血来潮而随意改变。对于可能使用高对比度主题的视障访问者来说,更改界面 block 的外观可能是一个更大的问题。
也就是说,如果滚动条包含在 <div>
中在您的页面中,您可以创建自定义滚动条并使用 JavaScript 使其发挥作用。这个 jQuery 插件看起来可以很好地解决这个问题:http://jscrollpane.kelvinluck.com/
我认为这或多或少是您想要做的:http://martinsmucker.com/demo/scroller.html
这是它的工作原理:
在文件的<head>
里面,我们必须引用几个样式表和脚本(您可能已经从 http://jscrollpane.kelvinluck.com/ 下载了它们。
这是绝大多数魔法发生的地方:
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding:0;
}
#container {
height:100%;
width:100%;
margin: 0;
padding:0;
overflow: auto;
}
</style>
<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.scroll-pane').jScrollPane();
});
</script>
这假定 css 和 js 文件位于与 html 文件相同的目录中。我们首先链接到提供的样式表。
然后,添加一些 CSS 以防止显示正常的滚动条。设置 margin
和 padding
html 和 body 为 0,并设置 height
到 100%。我们所有的内容都将包装在一个 id 为“container”的 div 中。这个容器完全填满页面(高度:100%;宽度:100%;)并且它窃取滚动以便我们可以自定义滚动条(overflow: auto;
)。
然后我们引用所有适当的脚本。在这里,我使用由 Google 托管的 jQuery 副本,我再次假设所有本地脚本都与 html 文件位于同一目录中。 jquery 的最后一点找到所有具有“滚动 Pane ”类的 div,并向它们添加适当的元素和滚动功能。
html 就非常简单了。
<body>
<div class="scroll-pane" id="container">
All of your content for the page goes here.
</div>
</body>
如果你做的一切都正确,你的页面应该看起来像我的例子。
关于css - Firefox 滚动条颜色变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3890471/