> 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/create-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="/files/eC0kaSMldwDL5VLCQHKP" 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="/files/EaNsGbH5UMOwCF2BcxqK" alt=""><figcaption></figcaption></figure>
{% endstep %}

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

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

A pop-up window will appear.

<figure><img src="/files/hYmLtB4ulENQiILSAoJE" 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="/files/xXwRJSKlRJPhgq5GDx82" 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 %}