javascript 在 Firefox 中增加滚动条宽度 - html / css

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/22243949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 22:45:23  来源:igfitidea点击:

Increase Scroll-bar width in Firefox - html / css

javascriptjqueryhtmlcssfirefox

提问by AtanuCSE

I saw some questions about this, but those questions don't gave a solution that could work for me.

我看到了一些关于此的问题,但这些问题并没有提供对我有用的解决方案。

I want to increase the Scrollbar widthof a div. The div size is huge, so a horizontal scrollbar has appeared. Now I want to increase the width of that scrollbar for more flexibility. So I search and found following link with code that works on Chrome browser. JSFiddle

我想增加div的滚动条宽度。div 大小很大,所以出现了一个水平滚动条。现在我想增加滚动条的宽度以获得更大的灵活性。所以我搜索并找到了以下链接,其中包含适用于 Chrome 浏览器的代码。 JSFiddle

::-webkit-scrollbar {
    width: 2em;
    height: 2em
}
::-webkit-scrollbar-button {
    background: #ccc
}

But this doesn't work on Firefox. I tried to replace the webkitwith moz, didn't work either.

但这不适用于 Firefox。我试图用moz替换webkit,也没有奏效。

I also found that writting following code in userContent.css file of firefox can increase scrollbar width, but 1) I didn't find that userContent.cssfile in windows 7. 2) I can't go to users' home to tell them how to increase scrollbar width manually :P That's not a solution.

我还发现在firefox的userContent.css文件中写下面的代码可以增加滚动条的宽度,但是1)我在windows 7中没有找到那个userContent.css文件。2)我不能去用户家告诉他们如何手动增加滚动条宽度 :P 这不是解决方案。

/* Increase width of VERTICAL SCROLLBAR */
scrollbar[orient="vertical"], scrollbar[orient="vertical"] thumb, scrollbar[orient="vertical"] scrollbarbutton { min-width: 35px !important; -moz-appearance: none !important; }

/* Increase width of HORIZONTAL SCROLLBAR */
scrollbar[orient="horizontal"], scrollbar[orient="horizontal"] thumb, scrollbar[orient="horizontal"] scrollbarbutton { min-height: 35px !important; -moz-appearance: none !important; }

Is there any way so that I can increase scrollbar width in both Chrome & Firefox?? (Forget IE) I can use html css javascript & jquerysolutions, but no scrollbar plugin. I've to convert the native scrollbar from browsers.

有什么办法可以在 Chrome 和 Firefox 中增加滚动条宽度?(忘记 IE)我可以使用html css javascript 和 jquery解决方案,但不能使用滚动条插件。我必须从浏览器转换本机滚动条。

采纳答案by Chris Spittles

Although chrome supports changing the scrollbar width using -webkit prefixes none of the other browsers do. Some allow the scrollbar to be styled so the colours are different but as far as I am aware you cannot change the width.

尽管 chrome 支持使用 -webkit 前缀更改滚动条宽度,但其他浏览器均不支持。有些允许设置滚动条的样式,因此颜色不同,但据我所知,您无法更改宽度。

Instead, if it is absolutely essential you change the scrollbar, you will need to use a JavaScript solution.

相反,如果您绝对需要更改滚动条,则需要使用 JavaScript 解决方案。

There are many solutions out there - too many to document in an answer on SO - but here are a few links to get you started:

有很多解决方案 - 太多,无法在 SO 的答案中记录 - 但这里有一些链接可以帮助您入门:

回答by codebot

check the below link. check the philipp comment mentioned in the site.

检查以下链接。检查网站中提到的 philipp 评论。

https://support.mozilla.org/en-US/questions/979461also check the bugZilla

https://support.mozilla.org/en-US/questions/979461也检查 bugZilla

https://bugzilla.mozilla.org/show_bug.cgi?id=77790

https://bugzilla.mozilla.org/show_bug.cgi?id=77790

Dont forget to check the comment #134

不要忘记查看评论#134

Custom CSS Scrollbar for Firefox

Firefox 的自定义 CSS 滚动条

回答by airi

Although you cant customs the css for FF .. you can use this plugin : http://manos.malihu.gr/tuts/m-custom-scrollbar-plugin.zip

虽然你不能为 FF 定制 css .. 你可以使用这个插件:http: //manos.malihu.gr/tuts/m-custom-scrollbar-plugin.zip