问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Firefox 中的滚动条颜色变化

社区维基
1
新手上路，请多包涵

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

原文由 XMen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译cssfirefoxscrollscrollbar
阅读 689
2 个回答
得票最新
社区维基
1
✓ 已被采纳

在 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 的最后一点找到所有具有“滚动窗格”类的 div，并为它们添加适当的元素和滚动功能。

那么html就很简单了。

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

如果你做的一切都正确，你的页面应该看起来像我的例子。

原文由 Michael Martin-Smucker 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

Chrome 和 Safari 确实支持滚动条的着色。将以下代码放入您的 CSS 中，看看奇迹发生了：

 ::-webkit-scrollbar {
  height: 12px;
  width: 12px;
  background: #969696;
  -webkit-border-radius: 1ex;
}

::-webkit-scrollbar-thumb {
  background: #2B2B2B;
  -webkit-border-radius: 1ex;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
  background: #1A1A1A;
}

唯一缺少的是 firefox 支持此功能。

原文由 Sander 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题