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
Increase Scroll-bar width in Firefox - html / css
提问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
回答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