# Customize Scrollbar

A tutorial showing the scrollbar customizations available in SpreadJS

## Content

SpreadJS provides two types of scrollbars:

* Classic Scrollbar (Skin appearance)
* Customizable Scrollbar (Mobile appearance)

The default scrollbar is the classic scrollbar which can be referred [here](/spreadjs/docs/features/workbook/scrollbar/scrollbars)
. However, you can change the classic scrollbar to customizable one by setting **ScrollbarAppearance** enumeration to **mobile** . The customization of scrollbar includes various options, such as color, border, cap, hover, auto fade etc. These customizations in mobile appearance can be used to match a website's theme or specific style of a webpage.
The mobile appearance displays four states of a scrollbar as explained below:

* **Hide** : The scrollbar hides itself when the mouse is moved away from it, after a few seconds.
* **Normal** : The scrollbar appears in normal state for a few seconds when the mouse is moved away from it. Other actions which display normal state are mouse wheel, traversing cells by keyboard, changing cell selection and sliding by touch.
* **Hover** : The scrollbar width and color changes in hover state which occurs when mouse is hovered over the scrollbar.
* **Active** : The active state of scrollbar occurs when the scrollbar is clicked and dragged in any direction. The scrollbar width, color and boundary changes as compared to normal state.

![](https://cdn.mescius.io/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/scrollbar_gif.gif?width=600)

SpreadJS applies a special state of mobile appearance when the mouse enters a spread host:

* **spread-hovering** : The scrollbar applies Normal and Hide states.

![](https://cdn.mescius.io/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/special_scrollbar_state.gif?width=600)

The difference between mobile and skin appearance of scrollbar has been explained below:

| **Scrollbar Behavior** | **Skin Apearance** | **Mobile Appearance** |
| ------------------ | -------------- | ----------------- |
| Scrollable Area and Visibility | Gets affected by tab strip | Does not get affected by tab strip |
| Arrows and Span | Visible | Invisible |

> **Note:** In mobile appearance, the scrollbar ignores any frozen rows or columns.

## Using Code

This example shows how to set the scrollbar appearance to mobile by using code.

```javascript
// Set scrollbarAppearance to mobile
 spread.options.scrollbarAppearance = GC.Spread.Sheets.ScrollbarAppearance.mobile;
```

You can also customize the scrollbar style by using class names and styles as shown in below code:

```css
 .gc-scroll-mobile-container {
       border-radius: 8px;
   }

   .gc-scroll-mobile-thumb {
       border-radius: 8px;
       border: none;
       background-color: skyblue;
       background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent );
   }

   .gc-scroll-mobile-state-active .gc-scroll-mobile-thumb {
       border: none;
       background-color: skyblue;
       background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent );
   }
```

The output of above code will display the scrollbar as below:

![](https://cdn.mescius.io/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/style_customized_scrollbar.gif?width=800)

Please follow the below mentioned styles in corresponding class names to customize the appearance of scrollbar.

```javascript
/* The recommended styles are in the {}. */

/* Scrollbar Container (Normal State) */
.gc-scroll-mobile-container { border-radius, opacity, padding }          /* The common style for scrollbar */
.gc-scroll-mobile-container-vertical { width }                           /* The style for vertical scrollbar */
.gc-scroll-mobile-container-horizontal { height }                        /* The style for horizontal scrollbar */

/* Scrollbar Thumb (Normal State) */
.gc-scroll-mobile-thumb { background, border, border-radius, opacity }   /* The style for scrollbar thumb */

/* Scrollbar Track (Normal State) */
.gc-scroll-mobile-track { background, border, border-radius, opacity }   /* The style for scrollbar track */

/* Combo class name, Add to Scrollbar Container */
.gc-scroll-mobile-spread-hovering                                        /* The style for scrollbar elements when mouse enter into spread host */
.gc-scroll-mobile-state-hide                                             /* The hide state style for scrollbar elements */
.gc-scroll-mobile-state-hover                                            /* The hover state style for scrollbar elements */
.gc-scroll-mobile-state-active                                           /* The active state style for scrollbar elements */
```

You can also set the mobile scrollbar in SpreadJS designer as shown below:
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260305.de50b3.png?width=800)