How do I add a border to the scroll bar track?

Code Help HTML/CSS/JS
1

Question:
I searched and couldn’t find anything T_T

Repl link:
https://replit.com/@InspireAndCode/InspireAndCode#static/css/style.css

::-webkit-scrollbar-track {
    border-left: 1px solid var(--outline-dimmest);
}

/* Works fine on the "thumb", but not on the track */
::-webkit-scrollbar-thumb {
    border-left: 1px solid var(--outline-dimmest);
}
1 Like
2

@QwertyQwerty88 have you read this? html - Apply Border-Radius To Scrollbars with CSS - Stack Overflow. The solution says to put a div over it to make a custom scroll bar.

3

So how exactly do I put a div around the scroll bar?

4

@QwertyQwerty88 how about this? Custom Scrollbars In CSS - Ahmad Shadeed.

Positioning to the right side (you can fiddle with hiding when not scrolling).

Try this:

.section::-webkit-scrollbar {
  width: 16px;
}

.section::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 100px;
}

.section::-webkit-scrollbar-thumb {
  background-color: #d4aa70;
  border-radius: 100px;
}
5

image
image1407×354 51.7 KB

:woman_shrugging:

6

@QwertyQwerty88 I assume by the shrugging it isn’t working? Oh wait its that Repl, lemme help.

7

Well, yeah, there’s no border on the track

8

So basically the problem is that ::-webkit-scrollbar-track has no border-left property, just border

2 Likes
9

@QwertyQwerty88 I was no use, I can’t see custom scroll bars :frowning_face:.

10

Cause ::-webkit-scrollbar only works on like Chrome and I think a couple other browsers

11

@QwertyQwerty88 so not Safari?

12
13

@QwertyQwerty88 so yeah not safari :frowning_face:, I wish there was a way to do it.

14

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