0

Here I've made the scrollbar's track take up less space than I'd normally have it take up. I do however want there to be a small region above and below the track which is not taken up by the track itself so the track can be an capsule-shaped container.

unwanted scrollbar color behavior

Sorry for the poor color contrast, but notice here that this region is a different color than the footer beside it. It's taking on the color of my body. I want this to be transparent so the color behind it comes through. Is this possible?

The relevant CSS:

::-webkit-scrollbar {
  width: 1.375rem;
  background-color: transparent; // doesn't work. it just inherits color of body
}

::-webkit-scrollbar-track {
  background: black;
  border-radius: 10px;
  margin: 2rem 0;
}

::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

Edit: This scrollbar is for the whole page

embracethefuture
  • 515
  • 7
  • 17
  • Here you can find a complete wiki of scrollbar behaviour that can answer you https://stackoverflow.com/questions/50817727/change-scrollbar-height – Alex197 Dec 07 '21 at 08:31
  • 1
    In addition to @Alex197 link please see [this answer](https://stackoverflow.com/a/14150577/4218046) on whats possible and how its done. – Fabian S. Dec 07 '21 at 08:32
  • @FabianS. can you point me to the part that's relevant to my question? This resource seems very comprehensive, but not even sure where to look – embracethefuture Dec 07 '21 at 08:36
  • @embracethefuture see https://stackoverflow.com/a/53221672/4218046 that maybe answers your specific question even better. – Fabian S. Dec 07 '21 at 08:37
  • @FabianS. Isn't this just for resizing the track region as I have done above? I don't really understand how this changes the color of the region behind the track. The region I pointed out is a part of region 1 in the breakdown, but I'm struggling to understand what the CSS does to make that region transparent – embracethefuture Dec 07 '21 at 08:55

0 Answers0