top | item 38879937

(no title)

dmitrybrant | 2 years ago

Yep, I'm also seeing a 2px scrollbar that does not expand.

discuss

order

papereditor|2 years ago

Oh yes, sorry. This is a form-over-function detail that I added to the website to mimic the app.

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!

kemayo|2 years ago

You can't (unless there's a trick I don't know) change the width of the scrollbar when hovering over it. However... you can keep the width constant and have the apparent-width of the scroll thumb be determined by transparent borders.

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

Narishma|2 years ago

> I thought that people anyway don't use the scroll bar that much

It's hard to do when every popular platform seems intent on making it unusable.