How to Style the Margins of Scrollbar Dragger in the Unity UI Toolkit?

Unity Engine
, , ,
1

Hey everyone,

I’ve recently started experimenting with the Unity UI Toolkit and would like to style a scrollbar. Specifically, I want the dragger of the scrollbar not to fill the entire height of the scrollbar but to always have some margin to the top and bottom of the tracker. I can manage to add spacing to the top by setting the top & bottom margin of the dragger to 1, but the bottom of the dragger still always aligns with the bottom of the tracker as the margin just gets added on with no regards to the actual tracker height:

grafik
grafik170×506 4.83 KB

I’ve already tried changing the position of the dragger to relative and the top and bottom position. Similarily, adjusting the height of the dragger to just 99% does not help as well. I also tried changing the padding of the parent elements of the dragger, but due to the hierachy layout, this affects the tracker as well, as they are at the same level:

Does anyone have ideas or approaches on how to achieve margine settings like this?

Thanks in advance!

2

Hello! Can I ask why you want to do this? is the scrollbar going over something you don’t want when doing this? or is it just a styling thing?

3

Hello, thanks for getting back to me!
The scrollbar isn’t overlapping anything, I just want to give it a specific look.

4

Unfortunately, for many reasons, the control doesn’t take into consideration other styling aspect that might affect its position. In this case, it’s only taking the height of the dragger element (and parent) and using that to calculate and modify the transform Y. A potential solution would be to maybe add empty VisualElements in your scrollview that correspond to how much you want to stop the dragger by.

5

It looks like setting the scale of the dragger to something like scale: 1 0.96; works fine. Just spent an hour trying to achieve the same effect you were going for and finally remembered the scale property.