How to properly make thin handle centered in wide track?

[krutoo]

Hi, i want to customize style of scrollbar.

In my case i want to make:

• scrollbar width 12px
• handle width 4px

Currently i have this styles:

.my-theme {
  --os-size: 12px;
  --os-track-border-radius: 0;
  --os-track-bg: #f00;
  --os-handle-border-radius: 2px;
  --os-handle-bg: #0f0;
  --os-handle-perpendicular-size: 4px;
  --os-handle-perpendicular-size-hover: 4px;
  --os-handle-perpendicular-size-active: 4px;
}

Everything is fine except the handle is not centered:

How can i properly make handle centered?

[KingSora]

@krutoo I guess this is the same question as "how do I center a div".. You have many possibilities like using padding, using margin, using the inset and more.

Please take a look at the styling section inside the README (https://github.com/KingSora/OverlayScrollbars#styling-in-depth) which explains how a scrollbar looks HTML wise and what the CSS selectors are.

[krutoo]

@KingSora I ask because I can’t be sure how the implementation of slider positioning will change in the future

I see there is transform and absolute position used and that is because i ask that question - i dont know what i should use in this specific case

[KingSora]

@krutoo as for v2 it won't change since changing it would mean a breaking change.. so everything that works with the current structure and styles will continue to work for the entirety of v2 :)

I even completely encourage you to be creative with your theme, since only then you really get what you want. The set of CSS Custom properties I offer is just here to cover the most frequent usecases. If they don't cover your usecase please use the full power of CSS to achieve it

[KingSora]

@krutoo Here is an example of how I would handle it: https://stackblitz.com/edit/overlayscrollbars-react-5shnc9?file=src%2Findex.css

.my-theme.os-scrollbar-horizontal .os-scrollbar-handle {
  margin-bottom: calc(
    var(--os-size) / 2 - var(--os-handle-perpendicular-size) / 2
  );
}
.my-theme.os-scrollbar-vertical .os-scrollbar-handle {
  margin-right: calc(
    var(--os-size) / 2 - var(--os-handle-perpendicular-size) / 2
  );
}

[krutoo]

this works for me, thanks

i tried some css solutions but the not works, thats why i ask quaestion and its question is not "how to" but "how to properly" so this question is not same as "how to center a div"