My Own Scroll Bar Styling Not Working Correctly

Operating system


Joplin version


Desktop version info

Joplin 2.14.20 (prod, linux)

Client ID: b099e5d204c548b797866cfda73a0c4a
Sync Version: 3
Profile Version: 46
Keychain Supported: No

Revision: cfd98e3

Backup: 1.4.0

What issue do you have?


I was playing with re-styling the scrollbars as I find them difficult to see on my laptop, so I wanted to make them a different color and a little wider. I had a look in the "Toggle development tools" bit and thought I found the answer, so I created this and added it to "Custom stylesheet for Joplin-wide app styles". It did the very job I needed.. sort of.

::-webkit-scrollbar {
    width: 10px;
    height: 7px;

::-webkit-scrollbar-thumb {
    background: #bd85e573;
    border-radius: 5px;

Three of my scrollbars have changed to what I wanted, but the far right one hasn't changed at all, any ideas of what I have done wrong or haven't done?



Adding that CSS to Custom stylesheet for rendered Markdown (userstyle.css) will change the right scrollbar.

This post explains which areas each stylesheet covers: Introduction to customising Joplin (userchrome.css & userstyle.css)

1 Like

Thank You

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.