Firefox中的滚动条颜色更改 [英] Scrollbar color change in Firefox
问题描述
我想更改Firefox中的滚动条颜色。
I want to change the scrollbar color in Firefox. How can I do that?
推荐答案
在Firefox中更改滚动条的颜色并不像Internet Explorer和Opera那么简单。 Firefox只允许通过主题设置滚动条的样式。这是一件好事。许多用户不喜欢在设计者的想象中随机改变界面小部件的外观和感觉。改变界面片的外观对于可能正在使用高对比度主题的视觉受损的访问者来说可能更是一个问题。
Changing the scrollbar color in Firefox is not as trivial as it is in Internet Explorer and Opera. Firefox only allows the style of the scrollbar to be set by the theme. This is a good thing. Lots of users don't like having the look and feel of interface widgets randomly changed at the whim of a designer. Changing the look of interface pieces can be even more of a problem for visually impaired visitors who may be using a high contrast theme.
也就是说，如果滚动条包含在a < div> ，您可以创建自定义滚动条并使用JavaScript实现其功能。这个jQuery插件看起来像做得很好： http://jscrollpane.kelvinluck.com/
That said, if the scrollbar is contained within a <div> in your page, you can create a custom scrollbar and make it functional using JavaScript. This jQuery plugin looks like it would do the trick pretty nicely: http://jscrollpane.kelvinluck.com/
我认为这或多或少是你想要做的： http://martinsmucker.com/ demo / scroller.html
I think this is more or less what you want to do: http://martinsmucker.com/demo/scroller.html
它的工作原理：
在文档的< head> ，我们必须参考多个样式表和指令码（您可能已经从 http ：//jscrollpane.kelvinluck.com/ 。
Inside the document's <head>, we have to reference several stylesheets and scripts (which you've probably already downloaded from http://jscrollpane.kelvinluck.com/.
这是绝大多数魔法发生的地方：
This is where a vast majority of the magic happens:
<!-- 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文件相同的目录中。我们从链接到所提供的样式表开始。
This assumes that the css and js files are located in the same directory as your html file. We start by linking to the provided stylesheet.
然后，添加一些CSS以防止显示正常的滚动条。将html和body的 margin 和 padding 设置为0，并将 height 到100％。我们的所有内容将被包装在一个标识为container的div中。这个容器完全填充页面（高度：100％;宽度：100％;），它偷走滚动，以便我们可以自定义滚动条（ overflow：auto; ）。
Then, add a bit of CSS to prevent the normal scrollbars from showing. Set the margin and padding of html and body to 0, and set the height to 100%. All of our content will be wrapped in a div with an id of "container". This container fills the page exactly (height: 100%; width:100%;) and it steals the scrolling so that we can customize the scrollbar (overflow: auto;).
然后我们引用所有适当的脚本。这里我使用的是由Google托管的jQuery的副本，我再次假设所有的本地脚本都在与html文件相同的目录中。 jquery的最后一点找到所有的div和scroll-pane类，并添加相应的元素和滚动功能给他们。
Then we reference all of the appropriate scripts. Here I'm using the copy of jQuery hosted by Google, and again I'm assuming that all of the local scripts are in the same directory as the html file. The last little bit of jquery finds all of the divs with the "scroll-pane" class and adds the appropriate elements and scroll functionality to them.
html是非常简单。
The html is then very simple.
<body>
<div class="scroll-pane" id="container">
All of your content for the page goes here.
</div>
</body>
如果你做的一切正确，你的页面应该像我的例子。
If you've done everything right, your page should look like my example.
这篇关于Firefox中的滚动条颜色更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
