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.

window.onload = function () {
function addThemeLink(href, type) {
var link = document.createElement('link');
link.type = "text/css";
link.rel = "stylesheet";
link.href = href;
link.setAttribute("name", type);
link.onload = function () {
spread.refresh();
}
var header = document.getElementsByTagName('head')[0];
header.appendChild(link);
}
function onThemeChanged(e, type) {
var href = e.target.value,
themeLink = document.querySelector('link[name="' + type + '"]');
var header = document.getElementsByTagName('head')[0];
themeLink && header.removeChild(themeLink);
if (href) {
href.split("&&").forEach(function (item) {
addThemeLink(item, type);
});
} else {
spread.refresh();
}
}
document.getElementById('themes').onchange = function(e) {
onThemeChanged(e, 'external');
};
document.getElementById('customize').onchange = function(e) {
onThemeChanged(e, 'customize');
};
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1});
spread.options.scrollbarAppearance = GC.Spread.Sheets.ScrollbarAppearance.mobile;
var sheet = spread.getActiveSheet();
sheet.setColumnCount(40);
addThemeLink(document.getElementById('themes').value, 'external');
addThemeLink(document.getElementById('customize').value, 'customize');
var mobileScrollbar = _getElementById("mobileScrollbar");
mobileScrollbar.addEventListener("change", function () {
spread.options.scrollbarAppearance = mobileScrollbar.checked ? GC.Spread.Sheets.ScrollbarAppearance.mobile : GC.Spread.Sheets.ScrollbarAppearance.skin;
});
};
function _getElementById(id){
return document.getElementById(id);
}

<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<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" />
<label for="mobileScrollbar">Mobile UI</label>
</div>
<div class="option-row">
<label for="themes">Spread & External Theme:</label>
<br>
<select id="themes">
<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">
<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>
</body>
</html>

.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;
}

Feedback