I did not, however, invest the time to make it expandable. I thought that people anyway don't use the scroll bar that much, and for quick navigation there is the table of contents on the left.
I'll see if I can make it more accessible!
It's hard to do when every popular platform seems intent on making it unusable.
This would give the appearance of your current 2px scrollbar, but it'd be usable, and would visually expand out to show its grabbable area on hover:
html::-webkit-scrollbar {
width: 8px;
}
html::-webkit-scrollbar-track {
background-color: transparent
}
html::-webkit-scrollbar-thumb {
background: #d73f00;
background-clip: padding-box;
border-left: 6px solid transparent;
}
html::-webkit-scrollbar-thumb:hover {
border: 0;
}
(The key to it is the background-clip property, that lets you use the border to control where the background is drawn.)You could also do exactly-this but without the :hover state, and it'd effectively just increase the grabbable-area of the thumb without any visual change to your current style. I like changing the visible width as a form of feedback though. :D
Seems to work.
Thank you!