css – Firefox中的滚动条颜色更改 - 代码日志

css – Firefox中的滚动条颜色更改

我想在Firefox中更改滚动条颜色。我怎样才能做到这一点?
在Firefox中更改滚动条颜色并不像Internet Explorer和Opera那样简单。 Firefox只允许通过主题设置滚动条的样式。这是一件好事。许多用户不喜欢随着设计师的兴奋随机改变界面小部件的外观和感觉。改变界面部分的外观对于可能使用高对比度主题的视力障碍的访问者来说,更是一个问题。

也就是说,如果滚动条包含在< 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以防止正常的滚动条显示。将html和body的margin和padding设置为0,并将height设置为100%。我们所有的内容将被包装在一个id为“container”的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>

如果你已经做好了所有的事情,你的页面就好像我的例子。

http://stackoverflow.com/questions/3890471/scrollbar-color-change-in-firefox

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:css – Firefox中的滚动条颜色更改