Can someone help me with scrollbars?

[Duck (Ray)]

So, I'm working on my Neocities site. (It's ugly, I know. please be nice.)

I recently decided to change the scrollbar since the default is a bit ugly. I figured out all on my own how to set the background image which was cool, but even after extensively searching the web I still can't find two very important things.

1- Is there any way at all to make it shorter? It takes up so much height!

2- Is there a way to add a margin? It's directly touching the border and it looks quite ugly :(

please help!!!

[Dan Q]

The height of a scrollbar is, by convention, the height of the area that the scrollbar scrolls; it's a user interface affordance to help the user understand what will change when they scroll. The height of the bar within the scrollbar is representative of how much content can be seen right now.

I'm not sure which of those you mean, but I'm moderately confident neither can be controlled by CSS alone (without changing the size of the scrollable container or entirely hiding the scrollbars... which, by the way, some but not all operating systems will do by default until they're hovered over or scrolled!).

I notice that your "Nav" section has sideways-scrolling, which you probably don't want. It's a consequence of the width of the content within, but there's nothing useful off to the right so you might like to do something about that, though, maybe, with e.g.:

Code

.bio-column {
  /* ... existing stuff ... */

  overflow-x: hidden;
}

You could almost-certainly add some kind of JavaScript that disabled the regular scrolling, listened for mousewheel (and ideally touch-drag) events (and optionally clicks on some kind of "page down" button or something?) and then scrolled on the user's behalf?

Another option would be trying to hide the scrollbar entirely and assuming that users will understand that they can scroll. There's no CSS way to do this that works in all browsers, but this will work in Chromium-based ones I've applied it to you bio, blog, and collection columns by way of example) - I tested with Edge and it works pretty well:

Code

.bio-column, .blog-column, .collection-column {
  &::-webkit-scrollbar {
    display: none;
  }
}