css - Firefox 滚动条颜色变化

标签 css firefox scroll scrollbar

我想更改 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 以防止显示正常的滚动条。设置 marginpadding 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/

相关文章:

html - 如何使 div 始终保持在背景上的单个点之上?

html - 如何使用 CSS 将文本定位在图像上

css - Firefox 中没有一致的断字

C# 获取 Firefox 中所有打开页面的 URL

javascript - 滚动到 jQuery 中的第一个错误,而不会在 JavaScript 控制台中发出警告

html - HTML/CSS Hex 中的背景图像解决方法

javascript - 显示无的 div 中的 Canvas 不起作用

javascript - 当焦点在地址栏中开始时,Firefox 焦点转换失败

javascript - 如果在移动设备上滚动,则防止点击链接

java - 带有 JScrollPane 和原型(prototype)单元格值的 JList 包裹元素名称(用点替换而不是显示水平滚动条),为什么?