dexteryao 发表于 2020-8-4 15:14:06

SpreadJS 移动端UI滚动条自定制

SpreadJS V13.2.0 支持了类似与移动端UI的滚动条。滚动条浮动于表格上部,更加优雅,按需显示。

通过属性:scrollbarAppearance开启功能
    spread.options.scrollbarAppearance = GC.Spread.Sheets.ScrollbarAppearance.mobile;
同时可以根据css样式,控制浮动滚动条的样式。

/* 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 */

页: [1]
查看完整版本: SpreadJS 移动端UI滚动条自定制