当前位置：文江博客话题详情

Firefox 中的滚动条颜色更改

发布于 2024-09-26 12:08:45 字数 39 浏览 3 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅沫记忆 2024-10-03 12:08:45

在 Firefox 中更改滚动条颜色并不像在 Internet Explorer 和 Opera 中那么简单。 Firefox 只允许通过主题设置滚动条的样式。这是一件好事。许多用户不喜欢界面小部件的外观和感觉随设计师的突发奇想而随机改变。对于可能使用高对比度主题的视障访问者来说，改变界面的外观可能会成为更大的问题。

也就是说，如果滚动条包含在页面的

内，您可以创建自定义滚动条并使用 JavaScript 使其发挥作用。这个 jQuery 插件看起来可以很好地完成这个任务： http://jscrollpane.kelvinluck.com/

我认为这或多或少是你想做的： http://martinsmucker.com/demo/scroller.html

它的工作原理如下：

在文档的中，我们必须引用几个样式表和脚本（您可能已经从 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 和 body 为 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>

如果您所做的一切正确，您的页面应该类似于我的示例。

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.

回复收藏 0 原文

探春 2024-10-03 12:08:45

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 支持此功能。

Chrome and Safari do support the coloring of the scrollbars. Place the following code in your css and see the magic happen:

::-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;
}

The only thing missing is for firefox to support this feature.

回复收藏 0 原文

就此别过 2024-10-03 12:08:45

自版本 64 起，Firefox 允许滚动条的样式受到限制：

.my-scrollable {
   scrollbar-color: red blue;
   scrollbar-width: thin;
}

请参阅 https:// developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color

Since version 64 Firefox allows limited styling of scrollbars:

.my-scrollable {
   scrollbar-color: red blue;
   scrollbar-width: thin;
}

See https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color

回复收藏 0 原文

春风十里 2024-10-03 12:08:45

直接通过 CSS 是不可能的。

但如果您可以使用 jQuery，jscrollpane 可能会帮助您。

回复收藏 0 原文

眼角的笑意。 2024-10-03 12:08:45

你不能。正如您在此处所看到的，这仅适用于 IE5+ 和 Opera7.2+。

编辑：使用一些javascript，可以构建您自己的“html滚动条”，其样式可以像您想要的那样 - 但我认为您不应该这样做，只是写这个详细说明。

回复收藏 0 原文

情话难免假 2024-10-03 12:08:45

嗯，我听到有人说“这是不可能的”......
但我不相信不可能的事情。

在下面的示例中，我只想对主侧边栏中的

<div class="parent">
<div class="sidebar">
<ul class="scrollable">
<li></li>
</ul>
</div>
</div>

Css 将是：

.scrollable {
overflow: auto;
max-height:80vh;
overflow-y: scroll;
scrollbar-color: #0A4C95 #C2D2E4;
}

.scrollable::-webkit-scrollbar {
width: 0.5em!important;
}

.scrollable::-webkit-scrollbar-track-piece {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}

.scrollable::-webkit-scrollbar-thumb:vertical {
background-color: #ddd;
outline: 1px solid slategrey;
}

这里是最终结果：

（注意：第一张图片是默认滚动条颜色）。

Well, I have heard someone saying "It's Impossible"...
But I don't believe in the impossible.

In the follwing example I only want to stylize the <ul> list in the main sidebar. Simply try this solution for Firefox scrollbar stylizes:

<div class="parent">
<div class="sidebar">
<ul class="scrollable">
<li></li>
</ul>
</div>
</div>

The Css will be:

.scrollable {
overflow: auto;
max-height:80vh;
overflow-y: scroll;
scrollbar-color: #0A4C95 #C2D2E4;
}

.scrollable::-webkit-scrollbar {
width: 0.5em!important;
}

.scrollable::-webkit-scrollbar-track-piece {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}

.scrollable::-webkit-scrollbar-thumb:vertical {
background-color: #ddd;
outline: 1px solid slategrey;
}

Here are the final results:

(Note: The first image is the default scrollbar color).

回复收藏 0 原文

月依秋水 2024-10-03 12:08:45

据我所知，这并不是很有用，但值得注意的是，控制 Firefox 中是否显示滚动条的属性是： (参考链接)

Attribute....scrollbars
Type.........nsIDOMBarProp
Description..The object that controls whether or not scrollbars 
             are shown in the window. This attribute is "replaceable" 
             in JavaScript. Read only

Firefox 还具有以下供应商特定属性：

Overflow: -moz-scrollbars-none

其他有效值为 -moz -水平滚动条和垂直滚动条。

This is not really useful as far as I know, but it's worth noting that the attribute which controls whether or not scrollbars are displayed in Firefox is: (reference link)

Attribute....scrollbars
Type.........nsIDOMBarProp
Description..The object that controls whether or not scrollbars 
             are shown in the window. This attribute is "replaceable" 
             in JavaScript. Read only

Firefox also has the following vendor specific properties:

overflow: -moz-scrollbars-none

other valid values are -moz-scrollbars-horizontal and -moz-scrollbars-vertical.

回复收藏 0 原文

青衫负雪 2024-10-03 12:08:45

对于 Firefox 或跨浏览器，您可以使用：
jQuery 自定义内容滚动器

更简单易用，

这里是我在 magento 中实现的示例并在 firefox、opera、chrome 和 safari 上进行了测试：https://i.sstatic.net/wnRCL.png< /a>

回复收藏 0 原文

不再让梦枯萎 2024-10-03 12:08:45

在 Firefox V103 中，着色滚动条适用于：

html, body{scrollbar-color: #f33942 #000;}

In Firefox V103 coloring scrollbar works with:

html, body{scrollbar-color: #f33942 #000;}

回复收藏 0 原文

~没有更多了~

关于作者

游魂

暂无简介

文章

28 人气

关注发私信

友情链接

文江博客

Firefox 中的滚动条颜色更改

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

关于作者

相关话题

热门标签

推荐作者

浪子阿飞

JK.Yang

人间不值得

静待花开

只涨不跌

污浊的双黑

友情链接

Firefox 中的滚动条颜色更改

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

关于作者

相关话题

热门标签

推荐作者

浪子阿飞

JK.Yang

人间不值得

静待花开

只涨不跌

污浊的双黑

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。