在Firefox中增加滚动条宽度-HTML/CSS [英] Increase Scroll-bar width in Firefox - html / css

问题描述

我看到了一些与此有关的问题，但是这些问题并未给出对我有用的解决方案.

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

我想增加div的滚动条宽度. div大小很大，因此出现了水平滚动条.现在，我想增加该滚动条的宽度以获得更大的灵活性. 因此，我搜索了以下链接，并找到了适用于Chrome浏览器的代码. JSFiddle

I want to increase the Scrollbar width of 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

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

但这在Firefox上不起作用.我试图将 webkit 替换为 moz ，但也无法正常工作.

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

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

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.css file 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.

/* 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; }

有什么办法可以增加Chrome和amp; amp;中的滚动条宽度?火狐浏览器?? (忘记IE)我可以使用 html css javascript& jQuery 解决方案，但没有滚动条插件.我必须从浏览器转换本机滚动条.

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

推荐答案

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

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.

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

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

那里有很多解决方案-关于SO的答案中没有太多文档-但是这里有一些链接可以帮助您入门:

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:

• http://slodive.com/web-development/jquery-scroll/
• http://designhuntr.com/custom-jquery-scrollers/
• http://www.bloggingehow. com/2012/11/top-10-jquery-scrollbar-plugins-with.html
• http://www.scratchinginfo.com/best-jquery-scrollbar-plugins /

• http://slodive.com/web-development/jquery-scroll/
• http://designhuntr.com/custom-jquery-scrollers/
• http://www.bloggingehow.com/2012/11/top-10-jquery-scrollbar-plugins-with.html
• http://www.scratchinginfo.com/best-jquery-scrollbar-plugins/

这篇关于在Firefox中增加滚动条宽度-HTML/CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！