> For the complete documentation index, see [llms.txt](https://help.parta.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.parta.io/branding/set-branding/section/scrollbar.md).

# Scrollbar

## What is a Scrollbar?

A **scrollbar** is a narrow vertical bar on the right edge of the screen that allows learners to shift the view of a page or window to see content that extends beyond the visible area.

## Set a Scrollbar Branding

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FSFxPcM1D4ckS3KgKBzeE%2FScrollbar_Branding.01%20(1).png?alt=media&amp;token=9695ec89-ac3a-4dd6-9306-61f5f2868cf0" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}
Go to the **Branding** tab.
{% endstep %}

{% step %}
Click on the branding template name.

A new window will appear.

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2F8iEq0WlaH2UtOdVXwMYu%2FScrollbar_Branding.02%20(1).png?alt=media&amp;token=8d85bf96-a8dd-4452-a788-e0a829d89d55" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Go to the **Section** tab.
{% endstep %}

{% step %}
Select **Scrollbar.**

A pop-up window will appear.

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FPEjO1hQYwajqtKeTCfwg%2FScrollbar.03.png?alt=media&amp;token=c9c93a1b-ab63-4296-a7a3-98249298dd45" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
[Set a scrollbar branding](#edit-scrollbar-branding-settings)**.**
{% endstep %}

{% step %}
Preview the changes of the loading screen.
{% endstep %}

{% step %}
Reset the changes to default.
{% endstep %}

{% step %}
Click the **Save** button to apply the changes.
{% endstep %}
{% endstepper %}

## Edit Scrollbar Branding Settings

[Open](#set-a-scrollbar-branding) a сourse loading page settings window to start editing.

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2F4jqfKRfyYxbxlfV2AFQm%2FScrollbar.04.png?alt=media&amp;token=001ffc69-abc8-4116-a8ec-89b75ea1d443" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}

### **Visibility**

Select a scrollbar visibility option from the drop-down menu:

* **Persistent**: Always displays the scrollbar;
* **On hover**: Shows the scrollbar when the learner hovers over the page;
* **On scroll**: Shows the scrollbar when scrolling the page;
* **On move**: Shows the scrollbar when the learner moves the cursor;
* **Hide**: Always hides the scrollbar.
  {% endstep %}

{% step %}

### **Width**

Adjust a slider or enter the width of the scrollbar in pixels.
{% endstep %}

{% step %}

### **Color**

Change the scrollbar color and its intensity by using a hex color code or selecting a shade from the palette or **Branding** color list.
{% endstep %}

{% step %}

### **Hover color**

Set the color that appears when users hover over the scrollbar by using a hex color code or selecting a shade from the palette or **Branding** color list.
{% endstep %}

{% step %}

### **Rounding**

Adjust the slider or enter the percentage value inside the input window to control corner roundness of the scrollbar.
{% endstep %}

{% step %}

### **Display border**

Click **No** to remove borders around the scrollbar.
{% endstep %}

{% step %}

### **Shadow**

Click **+** to add shadow effects to the reflection field for additional visual depth and emphasis.
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
Remember to apply the changes via the **Save** button.
{% endhint %}