Firefox 中的滚动条颜色更改 [英] Scrollbar color change in Firefox
问题描述
我想更改 Firefox 中的滚动条颜色.我该怎么做?
在 Firefox 中更改滚动条颜色不像在 Internet Explorer 和 Opera 中那么简单.Firefox 只允许主题设置滚动条的样式.这是一件好事.许多用户不喜欢界面小部件的外观和感觉随设计师的心血来潮而随机改变.对于可能使用高对比度主题的视障访问者来说，更改界面部分的外观可能更成问题.
也就是说，如果滚动条包含在页面中的
我认为这或多或少是你想要做的:http://martinsmucker.com/demo/scroller.html
这是它的工作原理:
在文档的 中，我们必须引用几个样式表和脚本(您可能已经从 http://jscrollpane.kelvinluck.com/.
这是绝大多数魔法发生的地方:
<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css"/><style type="text/css">html，正文{高度:100%；边距:0；填充:0;}#容器 {高度:100%；宽度:100%；边距:0；填充:0;溢出:自动；}</风格><!-- 脚本--><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();});这假设 css 和 js 文件与您的 html 文件位于同一目录中.我们首先链接到提供的样式表.
然后，添加一些 CSS 以防止显示正常的滚动条.设置html和body的margin和padding为0，height为100%.我们所有的内容都将被包装在一个 id 为容器"的 div 中.这个容器准确地填充了页面(高度:100%；宽度:100%；)并且它窃取了滚动以便我们可以自定义滚动条(overflow: auto;).
然后我们引用所有适当的脚本.在这里，我使用由 Google 托管的 jQuery 副本，并再次假设所有本地脚本与 html 文件位于同一目录中.jquery 的最后一点找到所有带有scroll-pane"类的 div，并向它们添加适当的元素和滚动功能.
HTML 非常简单.
<div class="scroll-pane" id="container">该页面的所有内容都放在这里.如果你做的一切都正确，你的页面应该看起来像我的例子.
I want to change the scrollbar color in Firefox. How can I do that?
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.
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/
I think this is more or less what you want to do: http://martinsmucker.com/demo/scroller.html
Here's how it works:
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>
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.
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;).
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.
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屋！
