javascript - Increase Scroll-bar width in Firefox - htmlcss - Stack Overflow

admin管理员组

文章数量:1386760

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

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

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

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.

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

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

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

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.

• javascript
• jquery
• html
• css
• firefox

Share Improve this question Follow asked Mar 7, 2014 at 7:21 AtanuCSEAtanuCSE 8,9401616 gold badges7979 silver badges115115 bronze badges 7

• 1 The answer is you cannot, so use some jQuery plugin – Mr. Alien Commented Mar 7, 2014 at 7:23
• 2 But "Everything is possible in this world" WITHOUT EVEN JQUERY PLUGINS – Pratik Joshi Commented Mar 7, 2014 at 7:27
• You mean in Chrome EVERYTHING IS ALL RIGHT but not in Firefox?,So you want the same thing in Firefox also ? – Pratik Joshi Commented Mar 7, 2014 at 7:29
• Duplicate : stackoverflow./questions/6165472/… – airi Commented Mar 7, 2014 at 7:31
• @PratikJoshi yes. I want to widen the scrollbar in FF – AtanuCSE Commented Mar 7, 2014 at 7:36

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 0

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.

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

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./web-development/jquery-scroll/
• http://designhuntr./custom-jquery-scrollers/
• http://www.bloggingehow./2012/11/top-10-jquery-scrollbar-plugins-with.html
• http://www.scratchinginfo./best-jquery-scrollbar-plugins/

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

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

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

Dont forget to check the ment #134

Custom CSS Scrollbar for Firefox

本文标签： javascriptIncrease Scrollbar width in FirefoxhtmlcssStack Overflow