Firefox中的滚动条颜色更改

小编典典

Firefox中的滚动条颜色更改

css

我想在Firefox中更改滚动条颜色。我怎样才能做到这一点？

阅读 349

2020-05-16

共1个答案

小编典典

在Firefox中更改滚动条颜色并不像在Internet
Explorer和Opera中那样简单。Firefox仅允许通过主题设置滚动条的样式。这是一件好事。许多用户不喜欢界面设计师随心所欲地随意更改界面小部件的外观。对于可能使用高对比度主题的视障访客来说，更改界面部件的外观甚至可能是一个更大的问题。

就是说，如果滚动条包含在<div>页面的内，则可以创建一个自定义滚动条并使用JavaScript使其功能正常。这个jQuery插件看起来很不错

运作方式如下：

在文档的内部<head>，我们必须引用几个样式表和脚本（您可能已经从下载了这些样式表和脚本）。

这是绝大部分魔术发生的地方：

<!-- 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和paddingHTML和身体为0，并设置height为100％。我们所有的内容都将包装在一个ID为“容器”的div中。这个容器正好填满了页面（高度：100％；宽度：100％；），并且窃取了滚动内容，因此我们可以自定义滚动条（overflow: auto;）。

然后，我们引用所有适当的脚本。在这里，我使用的是Google托管的jQuery副本，我再次假设所有本地脚本都与html文件位于同一目录中。jQuery的最后一点是使用“
scroll-pane”类查找所有div，并向其添加适当的元素和滚动功能。

html然后非常简单。

<body>
    <div class="scroll-pane" id="container">
    All of your content for the page goes here.
    </div>
</body>

如果您做对了所有事情，那么您的页面应类似于我的示例。

2020-05-16