Mobile UI Scrollbar

var spread = GC.Spread.Sheets.findControl(document.getElementById('ss')); //This example changes scrollbar appearance to mobile. spread.options.scrollbarAppearance = GC.Spread.Sheets.ScrollbarAppearance.mobile;

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

SpreadJS provides two scrollbar appearances: skin and mobile. These two appearances will automatically switch according to different devices. User can also change it manually by using spread.options.scrollbarAppearance. The mobile scrollbar appearance will inherit all spread themes and all external themes we supported. In addition, user could customize the mobile scrollbar appearance by using Public CSS Classname & CSS Styles.

<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<p>Change the options below to see the different scrollbar appearances.</p>
<div class="option-row">
<input type="checkbox" id="mobileScrollbar" checked="checked" v-model="useMobileScrollbar"
@change="onScrollbarAppearanceChanged()" />
<label for="mobileScrollbar">Mobile UI</label>
</div>
<div class="option-row">
<label>Spread & External Theme:</label>
<br>
<select id="themes" @change="applyTheme($event, 'external')">
<optgroup label="SpreadJS">
<option
value="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
selected="selected">Excel 2013white</option>
<option
value="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013lightGray.css">
Excel 2013lightGray</option>
<option
value="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013darkGray.css">
Excel 2013darkGray</option>
<option
value="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css">
Excel 2016colorful</option>
<option
value="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css">
Excel 2016darkGray</option>
<option
value="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2016black.css">
Excel 2016black</option>
</optgroup>
<optgroup label="Bootstrap">
<option
value="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css&&https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
Bootstrap 3.3.4
</option>
</optgroup>
<optgroup label="jQuery UI">
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/black-tie/jquery-ui.css">
Black Tie
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/blitzer/jquery-ui.css">
Blitzer
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/cupertino/jquery-ui.css">
Cupertino
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/dark-hive/jquery-ui.css">
Dark Hive
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/dot-luv/jquery-ui.css">
Dot Luv
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/eggplant/jquery-ui.css">
Eggplant
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/excite-bike/jquery-ui.css">
Excite Bike
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/flick/jquery-ui.css">
Flick
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/hot-sneaks/jquery-ui.css">
Hot Sneaks
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/humanity/jquery-ui.css">
Humanity
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/le-frog/jquery-ui.css">
Le Frog
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/mint-choc/jquery-ui.css">
Mint Chocolate
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/overcast/jquery-ui.css">
overcast
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/pepper-grinder/jquery-ui.css">
Pepper Grinder
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/redmond/jquery-ui.css">
Redmond
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/smoothness/jquery-ui.css">
Smoothness
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/south-street/jquery-ui.css">
South Street
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/start/jquery-ui.css">
Start
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/sunny/jquery-ui.css">
Sunny
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/swanky-purse/jquery-ui.css">
Swanky Purse
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/trontastic/jquery-ui.css">
Trontastic
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-darkness/jquery-ui.css">
UI Darkness
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
UI Lightness
</option>
<option
value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/vader/jquery-ui.css">
Vader
</option>
</optgroup>
</select>
</div>
<div class="option-row">
<label for="customize">Custom Styling:</label>
<br>
<select id="customize" @change="applyTheme($event, 'customize')">
<option value="./custmize/none.css" selected="selected">None</option>
<option value="./custmize/shadowTrack.css">Shadow Track</option>
<option value="./custmize/linearGradient.css">Linear Gradient</option>
<option value="./custmize/dataGridLike.css">Data Grid Like</option>
<option value="./custmize/closeToTheEdge.css">Close to the Edge</option>
</select>
</div>
</div>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import { ref } from "vue";
import "@mescius/spread-sheets-vue";
let spread = null;
const useMobileScrollbar = ref(true);
const initSpread = (s) => {
spread = s;
spread.options.scrollbarAppearance = GC.Spread.Sheets.ScrollbarAppearance.mobile;
const sheet = spread.getActiveSheet();
sheet.setColumnCount(40);
addThemeLink(document.getElementById('themes').value, 'external');
addThemeLink(document.getElementById('customize').value, 'customize');
};
const applyTheme = ($event, type) => {
const href = $event.target.value;
const themeLink = document.querySelector('link[name="' + type + '"]');
const header = document.getElementsByTagName('head')[0];
themeLink && header.removeChild(themeLink);
if (href) {
href.split("&&").forEach((item) => addThemeLink(item, type));
} else {
spread.refresh();
}
}
const addThemeLink = (href, type) => {
const link = document.createElement('link');
link.type = "text/css";
link.rel = "stylesheet";
link.href = href;
link.setAttribute("name", type);
link.onload = () => spread.refresh();
const header = document.getElementsByTagName('head')[0];
header.appendChild(link);
}
const onScrollbarAppearanceChanged = () => {
spread.options.scrollbarAppearance = useMobileScrollbar.value
? GC.Spread.Sheets.ScrollbarAppearance.mobile
: GC.Spread.Sheets.ScrollbarAppearance.skin;
}
</script>
<style scoped>
#app {
height: 100%;
}
.sample {
position: relative;
height: 100%;
overflow: auto;
}
.sample::after {
display: block;
content: "";
clear: both;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
label {
display: block;
margin-bottom: 6px;
}
input,
select {
padding: 4px 6px;
box-sizing: border-box;
margin-bottom: 6px;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
.option-row label {
display: inline-block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>

<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>

(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-en': 'npm:@mescius/spread-sheets-resources-en/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);

Feedback