How to keep the scroll bar handle at a fixed size?

Hi!

I’m trying to do a scrolling list, but when designing how it would look, i want the handle to stay at a fixed size no matter the size of the list (so I can make a custom sprite for it). Basically like a slider than a scrollbar, but I can’t pass in a slider to the scroll rect component.

Is there a way I can restrict the size on the scrollbar’s handle? Or a way I can use a slider to move the list instead of a scrollbar? Or maybe make the handle sprite a child of the handle object but have it actually reach the ends of the bar when it moves?

3 Answers

3

It is possible to use a Slider for scrolling a ScrollRect by using ScrollRect.verticalNormalizedPosition. You can assign the value of the slider to the verticalNormalizedPosition (if you need to normalize the Slider’s value just divide the current value with the max).

Also, since for a ScrollRect a verticalNormalizedPosition = 0 is the bottom, you may want to flip the orientation (or value) of the slider.

Example script:

using UnityEngine;
using UnityEngine.UI;

public class ScrollWithSliderTest : MonoBehaviour
{
	public ScrollRect Rect;
	public Slider ScrollSlider;

	private void Update()
	{
		Rect.verticalNormalizedPosition = ScrollSlider.value;
	}
}

Thank you! I'll try this out! Will this only affect the scroll rect when using the slider? How about if I scroll by other means (like using touch/gamepad navigation inside the scroll rect), will it also update the slider's position? If not, is there a way I can do that without them canceling each other out? Is there something I can check to know if the scroll rect moves/changes?

Another method would be to reset the scrollbar size to 0 (zero) on change.

`

using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(Scrollbar))]
public class FIX_Scrollbar : MonoBehaviour
{
    //public GameObject scrollbar;

    public void setFixedHandleSize ()
    {
        GetComponent<Scrollbar>().size = 0;
    }
}

`

*** Screenshot upload failed

Add => script to the Scrollbar Vertical.

Then => Add to On Value Changed.

public void SetScrollBarHandleSize()
{
scrollbarLevel.size = 0;
scrollbarHandle.sizeDelta = new Vector2(91, 25);
}

call this function in scroll react