滚动条外观设置

概述本 Demo 展示了如何切换滚动条外观样式，以及如何自定义移动端滚动条样式。Demo 提供了复选框用于切换滚动条外观（移动端/经典），下拉框用于选择不同的 SpreadJS 主题和外部主题，以及预设的自定义样式选项。实现思路初始化 Workbook 时设置滚动条外观为移动端模式创建复选框监听器，允许用户动态切换滚动条外观创建主题切换功能，支持 SpreadJS 内置主题和外部主题（如 Bootstrap、jQuery UI）创建自定义样式切换功能，展示不同的移动端滚动条样式预设动态加载主题 CSS 文件，并在加载完成后刷新表格显示代码解析设置滚动条外观这段代码在创建 Workbook 时将滚动条外观设置为移动端模式。GC.Spread.Sheets.ScrollbarAppearance 是一个枚举，包含两个值：skin（经典外观）和 mobile（移动端外观）。动态切换滚动条外观这段代码监听复选框的变化事件，根据复选框的选中状态动态切换滚动条外观。选中时使用移动端外观，取消选中时使用经典外观。动态加载主题文件这个函数动态创建 <link> 标签加载 CSS 文件，并在加载完成后调用 spread.refresh() 方法刷新表格，确保新主题立即生效。切换主题时的处理逻辑这段代码在切换主题时，先移除旧的主题文件，然后加载新的主题文件。如果新主题的 URL 包含多个文件（用 && 分隔），会依次加载所有文件。运行效果打开 Demo 后，滚动条默认显示为移动端外观样式勾选或取消"移动 UI"复选框，可以在移动端外观和经典外观之间切换选择不同的"Spread 与外部主题"下拉选项，滚动条会继承相应的主题样式（如 Excel 2013 白色、Excel 2016 黑色、Bootstrap 等）选择不同的"自定义样式"下拉选项，可以应用预设的自定义滚动条样式（如阴影轨道、线性渐变、类似数据网格等）所有主题和样式切换都是实时生效的，无需刷新页面 API 参考 ScrollbarAppearance 枚举 GC.Spread.Sheets.ScrollbarAppearance 枚举用于指定垂直和水平滚动条的外观。 skin：经典滚动条外观（默认值） mobile：移动端滚动条外观，支持自定义样式 scrollbarAppearance 属性类型：ScrollbarAppearance 枚举默认值：skin 说明：用于获取或设置工作簿的滚动条外观样式 refresh 方法刷新工作簿显示，通常在更改主题或样式后调用，确保视觉更新立即生效。自定义移动端滚动条的 CSS 类名 .gc-scroll-mobile-container：滚动条容器（通用样式） .gc-scroll-mobile-container-vertical：垂直滚动条容器 .gc-scroll-mobile-container-horizontal：水平滚动条容器 .gc-scroll-mobile-thumb：滚动条滑块 .gc-scroll-mobile-track：滚动条轨道 .gc-scroll-mobile-state-hide：隐藏状态 .gc-scroll-mobile-state-hover：悬停状态 .gc-scroll-mobile-state-active：激活状态 .gc-scroll-mobile-spread-hovering：鼠标进入表格时的状态

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="spreadjs culture" content="zh-cn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/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$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.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>更改以下选项以查看不同的滚动条外观。</p>
<div class="option-row">
<input type="checkbox" id="mobileScrollbar" checked="checked" />
<label for="mobileScrollbar">移动 UI</label>
</div>
<div class="option-row">
<label for="themes">Spread 与外部主题：</label>
<br>
<select id="themes">
<optgroup label="SpreadJS">
<option
value="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
selected="selected">Excel 2013 白色</option>
<option
value="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013lightGray.css">
Excel 2013 浅灰色</option>
<option
value="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013darkGray.css">
Excel 2013 深灰色</option>
<option
value="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css">
Excel 2016 彩色</option>
<option
value="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css">
Excel 2016 深灰色</option>
<option
value="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2016black.css">
Excel 2016 黑色</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">自定义样式：</label>
<br>
<select id="customize">
<option value="./custmize/none.css" selected="selected">无</option>
<option value="./custmize/shadowTrack.css">阴影轨道</option>
<option value="./custmize/linearGradient.css">线性渐变</option>
<option value="./custmize/dataGridLike.css">类似数据网格</option>
<option value="./custmize/closeToTheEdge.css">贴近边缘</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;
}

SpreadJS 在线示例