This appears to be an issue exclusively on Chrome for Mac OS X, but for code blocks that contain a single line of code larger than the viewport, when I try to scroll them and the large scrollbar appears, when I mouse away, the bar does not disappear.

I cannot reproduce the problem in Firefox; it uses the same system scrollbars, but they do disappear properly.

Here's an example:

screenshot of scrollbar issue

This is a usability issue because it renders the code block unreadable until a page refresh.


I'm using Chrome Version 49.0.2623.112 (64-bit) on Mac, but I don't have this issue.

On the other hand, I may have a solution.

The behavior of scroll bars can be changed in System Preferences. (Look in General or search for scroll bar behavior.)

Given your description, it seems likely that you're using the "show only when scrolling" setting. I don't like this setting; although my scroll bars disappear after a second of not scrolling, the bar is right on top of the line of text when it is visible. Well, that is if I actually know things can scroll without the visual indication in the first place...

That's why I use one of the other two options (there are no apparent differences between them for me). This way, the scroll bar will appear under the line of text, not over it:

like this.

Of course, this will change this setting everywhere, but it's worth considering.

  • Thanks for the recommendation, I think I'll probably keep this setting. – Patrick Roberts Jun 19 '16 at 23:07

I posted my solution in another question but will post the same answer here too,


@Patrick Roberts suggested that you could just override the default CSS with stylish instead of using userscripts, which I agree that is a better solution, so you don't have to run potentially malicious javascript.

Here are a couple of the scrollbars I've found:

This one works well if you like windows 10 scrollbars. You can customize it make it a little different. I have no problems with this one. https://userstyles.org/styles/166079/windows-10-dark-scrollbar

The following actually the same as the userscript below. Stylish actually lets you install as a userscript if you want. It's partially broken for me though. I had to edit the CSS to be ::-webkit-scrollbar... instead of html::-webkit-scrollbar.... It works well otherwise. https://userstyles.org/styles/127819/dark-minimalistic-scrollbar

This one doesn't seem to work for horizontal scrollbars on Chrome. https://userstyles.org/styles/167001/custom-scrollbars-all-sites

If you don't want make system-wide changes, you can use userscripts to override the default CSS.

I am using Tampermonkey on Google Chrome.

These two userscripts work pretty well:

https://openuserjs.org/scripts/leyang/Dark_minimalistic_scrollbar Dark minimalistic scrollbar

https://greasyfork.org/en/scripts/36332-%E8%BF%B7%E4%BD%A0%E6%BB%9A%E5%8A%A8%E6%9D%A1-mini-scrollbar 迷你滚动条(Mini ScrollBar)

Those two make the scrollbar always visible and under the code block.

I just searched "scrollbar" on OpenUserJS or GreasyFork.

It seems like OpenUserJS only has one custom scrollbar. GreasyFork has a couple so look for one that suits you. Or you can modify the code if needed.

  • 1
    Seems like you could forego the use of JavaScript since all it's doing is injecting a stylesheet into the DOM. Stylish would be a good extension for doing that without resorting to a userscript. – Patrick Roberts Mar 5 at 23:56
  • Hmm didn't think of that for some reason. That would be preferable so you don't have to run potentially malicious code. Thanks for the suggestion. Have you found one that just changes the scrollbar and not a whole theme? – dosentmatter Mar 5 at 23:58
  • 1
    The nice thing about stylish is you can add your own custom css and write your own url filter to apply to all sites, you don't have to use a pre-made theme for a specific site. – Patrick Roberts Mar 6 at 0:06
  • Oh okay. I see that you are the OP and you posted this question in 2016. What solution have you been using since then? – dosentmatter Mar 6 at 0:08
  • 1
    I made the system-wide change in the other answer. I agree it's dumb to hide a scrollbar when a UI element should always visibly indicate that it's scrollable. I still think you should leave this answer though, and I did upvote it. Some people may prefer this and only want the change on their browser or even just on Stack Exchange. – Patrick Roberts Mar 6 at 0:10

We can’t fix this, but we CAN work around it - and now we have. Details here: https://meta.stackoverflow.com/a/381280/734487

  • In case you're confused about the downvotes, this is not an answer. The respective question has also already been linked by Xufox. – Patrick Roberts Mar 14 at 16:12
  • @PatrickRoberts Understood, just wanted to alert you of why we addressed it the way we did. – Ted Goas Mar 14 at 16:37
  • 5
    @PatrickRoberts: A dev telling you that they can't fix it but there's a workaround being put into production doesn't qualify as an answer? I'm confused. – Makoto Mar 14 at 16:51
  • @Makoto Maybe I'm in disagreement with you about what qualifies as an attempted answer, but this is a valid reason to downvote. There is no effort to make the answer here self-sufficient without the link. I have removed the flag as it seems the consensus on the meta post I linked is that this is semantically an attempt at an answer, but I still feel this is a misuse of an answer, and is at best a comment. – Patrick Roberts Mar 14 at 17:06
  • 1
    Maybe it should've been closed as a dupe to that question instead. I see your point and largely agree with it @PatrickRoberts. – Makoto Mar 14 at 17:07

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .