自定义滚动条

SpreadJS提供两种类型的滚动条:

• 经典滚动条(外观)
• 可定制的滚动条(移动外观)

默认的滚动条是经典的滚动条，可以在这里引用。但是，您可以通过将 ScrollbarAppearance 枚举设置为 mobile 来将传统的滚动条变更为可定制的滚动条。滚动条的自定义包括颜色、边框、上限、悬停、自动淡出等选项。这些移动外观的定制可以用来匹配网站的主题或网页的特定风格。

移动外观显示滚动条的四种状态，如下所述:

• Hide : 几秒钟后，当鼠标从滚动条中移开时，滚动条会隐藏起来。
• Normal : 当鼠标离开滚动条时，滚动条会在几秒钟内处于正常状态。其他显示正常状态的操作有鼠标滚轮、通过键盘横越单元格、改变单元格选择和通过触摸滑动。
• Hover : 当鼠标悬停在滚动条上时，滚动条的宽度和颜色会在悬停状态下发生变化。
• Active : 滚动条的活动状态发生在单击滚动条并向任何方向拖动滚动条时。与正常状态相比，滚动条的宽度、颜色和边界会发生变化。

当鼠标进入spread host时，SpreadJS应用一种特殊的移动状态:

• spread-hovering : 滚动条应用正常状态和隐藏状态。

滚动条的移动外观和皮肤外观的区别解释如下:

在移动外观中，滚动条忽略任何冻结的行或列.

注意: 在移动外观中，滚动条忽略任何冻结的行或列.

使用代码

这个例子展示了如何使用代码将滚动条外观设置为mobile。

// 将scrollbarAppearance设置为mobile
 spread.options.scrollbarAppearance = GC.Spread.Sheets.ScrollbarAppearance.mobile;

您也可以使用如下代码所示的类名称和样式来定制滚动条样式:

<style>
    .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 );
    }
</style>

以上代码的输出将显示如下滚动条:

请在相应的类名称中按照下面提到的样式来定制滚动条的外观。

/* 推荐的样式在{}中. */
 
/* 滚动条容器(正常状态)*/
.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 */
 
/* 滚动条缩略图(正常状态)*/
.gc-scroll-mobile-thumb { background, border, border-radius, opacity }   /* The style for scrollbar thumb */
 
/* 滚动条轨迹(正常状态)*/
.gc-scroll-mobile-track { background, border, border-radius, opacity }   /* The style for scrollbar track */
 
/* 组合类名称，添加到滚动条容器 */
.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 */

你也可以在SpreadJS设计器设置移动滚动条，如下所示: