垂直スクロールバーの矢印ボタンを使用して、一度に1行ずつ上下にスクロールしたり、水平スクロールバーでは一度に1列ずつスクロールすることができます。スクロールバーのボックスをドラッグすると、より速くスクロールできます。スクロールする最も速い方法は、ボックスと矢印ボタンの間のスペースをクリックすることで、これによりページごとにシートをスクロールします。
SpreadJSスクロールバーはデフォルトで有効になっており、WorkbookオブジェクトのshowVerticalScrollbarメソッドとshowHorizontalScrollbarメソッドをfalseに設定すると無効にできます：
スクロールバーのボックスをドラッグすると、ツールチップが表示される場合があります。垂直スクロールバーのボックスをドラッグすると、スクロールチップに一番上の行が表示されます。同様に、水平スクロールバーでは左端の列が表示されます。スクロールのヒントは、ワークブックのshowScrollTipオプションで有効にします：
スクロールボックスの制御
通常、アクティブなシートの最後の行または列を超えてスクロールすると、空白の領域が表示されます。scrollbarMaxAlignオプションを有効にすると、行または列があるアクティブなシートの領域にスクロールが制限されます。
スクロールボックスは、高速スクロールでの使用に加えて、シートの上部または下部に達するまでのスクロール量をそのサイズで視覚的に示します。スクロールボックスのサイズは2つのオプションで制御できます：1つ目はscrollbarShowMaxで、アクティブなシートの行または列の総数に基づいてコンテナのサイズを計算します。2つ目はscrollIgnoreHiddenで、サイズの計算において非表示の行または列を無視します。
次のアイテムは非表示として扱われます：
高さがゼロの行
幅がゼロの列
非表示の行または列
折りたたみに含まれる行または列
フィルターで除外された行
スクロールバーの自動表示
スクロールバーは auto モードをサポートしており、スクロールバーの表示を自動的に制御することで、モダンで使いやすい動作を提供します。
auto に設定すると、スクロール可能なコンテンツがない場合にスクロールバーは非表示になります。たとえば、scrollbarMaxAlign が true で、すべてのコンテンツがビューポートに収まる場合や、固定行／固定列がすべてのコンテンツを覆う場合です。
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
// Store initial values for restore
var initialRowCount = sheet.getRowCount();
var initialColumnCount = sheet.getColumnCount();
var initialScrollbarMaxAlign = spread.options.scrollbarMaxAlign;
var initialScrollbarShowMax = spread.options.scrollbarShowMax;
// Initialize row/column count editors
_getElementById('columnCount').value = sheet.getColumnCount();
_getElementById('rowCount').value = sheet.getRowCount();
/* Binding settings */
_getElementById('showHorizontalScrollbar').addEventListener('change', function() {
var value = this.value;
spread.options.showHorizontalScrollbar = value === 'auto' ? 'auto' : value === 'true';
if (value === 'auto') {
// Set scrollbarMaxAlign and scrollbarShowMax to true, set column count to 10
spread.options.scrollbarMaxAlign = true;
spread.options.scrollbarShowMax = true;
sheet.setColumnCount(10);
_getElementById('columnCount').value = sheet.getColumnCount();
_getElementById('scrollbarMaxAlign').checked = true;
_getElementById('scrollbarShowMax').checked = true;
} else {
// Restore column count
sheet.setColumnCount(initialColumnCount);
_getElementById('columnCount').value = sheet.getColumnCount();
// Only restore scrollbarMaxAlign and scrollbarShowMax if showVerticalScrollbar is not 'auto'
if (_getElementById('showVerticalScrollbar').value !== 'auto') {
spread.options.scrollbarMaxAlign = initialScrollbarMaxAlign;
spread.options.scrollbarShowMax = initialScrollbarShowMax;
_getElementById('scrollbarMaxAlign').checked = initialScrollbarMaxAlign;
_getElementById('scrollbarShowMax').checked = initialScrollbarShowMax;
}
}
});
_getElementById('showVerticalScrollbar').addEventListener('change', function() {
var value = this.value;
spread.options.showVerticalScrollbar = value === 'auto' ? 'auto' : value === 'true';
if (value === 'auto') {
// Set scrollbarMaxAlign and scrollbarShowMax to true, set row count to 10
spread.options.scrollbarMaxAlign = true;
spread.options.scrollbarShowMax = true;
sheet.setRowCount(10);
_getElementById('rowCount').value = sheet.getRowCount();
_getElementById('scrollbarMaxAlign').checked = true;
_getElementById('scrollbarShowMax').checked = true;
} else {
// Restore row count
sheet.setRowCount(initialRowCount);
_getElementById('rowCount').value = sheet.getRowCount();
// Only restore scrollbarMaxAlign and scrollbarShowMax if showHorizontalScrollbar is not 'auto'
if (_getElementById('showHorizontalScrollbar').value !== 'auto') {
spread.options.scrollbarMaxAlign = initialScrollbarMaxAlign;
spread.options.scrollbarShowMax = initialScrollbarShowMax;
_getElementById('scrollbarMaxAlign').checked = initialScrollbarMaxAlign;
_getElementById('scrollbarShowMax').checked = initialScrollbarShowMax;
}
}
});
_getElementById('scrollbarMaxAlign').addEventListener('change', function() {
spread.options.scrollbarMaxAlign = this.checked;
initialScrollbarMaxAlign = this.checked;
});
_getElementById('scrollbarShowMax').addEventListener('change', function() {
spread.options.scrollbarShowMax = this.checked;
initialScrollbarShowMax = this.checked;
});
_getElementById('optShowScrollTip').addEventListener('change', function() {
var result = parseInt(this.value);
spread.options.showScrollTip = result;
});
_getElementById('scrollIgnoreHidden').addEventListener('change', function() {
spread.options.scrollIgnoreHidden = this.checked;
});
_getElementById('columnCount').addEventListener('change', function() {
var value = parseInt(this.value);
if (value > 0) {
sheet.setColumnCount(value);
initialColumnCount = value;
}
});
_getElementById('rowCount').addEventListener('change', function() {
var value = parseInt(this.value);
if (value > 0) {
sheet.setRowCount(value);
initialRowCount = value;
}
});
}
function _getElementById(id){
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="ja-jp" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<aside class="options-container" aria-label="スクロールバー設定">
<div class="panel-header">
<h1>スクロールバー設定</h1>
<p class="panel-description">下記のプロパティを変更して、ワークブックのスクロールバーのさまざまな側面にどのように影響するかを確認してください。</p>
</div>
<section class="control-section">
<h2>スクロールチップ</h2>
<div class="field">
<label for="optShowScrollTip">スクロールチップを表示する</label>
<select id="optShowScrollTip">
<option value="0" selected="selected">なし</option>
<option value="1">水平</option>
<option value="2">垂直</option>
<option value="3">両方</option>
</select>
</div>
</section>
<section class="control-section">
<h2>水平スクロールバー</h2>
<div class="field">
<label for="columnCount">列数</label>
<input type="number" id="columnCount" min="1" value="20" />
</div>
<div class="field">
<label for="showHorizontalScrollbar">水平スクロールバーを表示</label>
<select id="showHorizontalScrollbar">
<option value="true" selected>表示</option>
<option value="false">非表示</option>
<option value="auto">自動</option>
</select>
<p class="hint">水平スクロールバーの表示状態を設定します。自動表示には 'auto' を使用します。</p>
</div>
</section>
<section class="control-section">
<h2>垂直スクロールバー</h2>
<div class="field">
<label for="rowCount">行数</label>
<input type="number" id="rowCount" min="1" value="200" />
</div>
<div class="field">
<label for="showVerticalScrollbar">垂直スクロールバーを表示</label>
<select id="showVerticalScrollbar">
<option value="true" selected>表示</option>
<option value="false">非表示</option>
<option value="auto">自動</option>
</select>
<p class="hint">垂直スクロールバーの表示状態を設定します。自動表示には 'auto' を使用します。</p>
</div>
</section>
<section class="control-section">
<h2>詳細オプション</h2>
<label class="check-field" for="scrollbarMaxAlign">
<input type="checkbox" id="scrollbarMaxAlign">
<span>
<strong>スクロールバーを最大位置に揃えて表示</strong>
<small>このオプションを設定すると、最後の行／列までしかスクロールできなくなります。</small>
</span>
</label>
<label class="check-field" for="scrollbarShowMax">
<input type="checkbox" id="scrollbarShowMax" checked="checked" />
<span>
<strong>スクロールバーを最大表示</strong>
<small>このオプションを設定すると、スクロールバーに最大限のスクロールスペースが表示されます。</small>
</span>
</label>
<label class="check-field" for="scrollIgnoreHidden">
<input type="checkbox" id="scrollIgnoreHidden" />
<span>
<strong>スクロール時に非表示領域を無視</strong>
<small>非表示の行または列を無視するように設定します。</small>
</span>
</label>
</section>
</aside>
</div>
</body>
</html>
html,
body {
height: 100%;
margin: 0;
}
body {
position: absolute;
inset: 0;
color: #1f2933;
background: #f7f8fa;
}
.sample-tutorial {
display: flex;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
flex: 1 1 auto;
min-width: 0;
height: 100%;
overflow: hidden;
}
.options-container {
flex: 0 0 320px;
width: 320px;
height: 100%;
padding: 24px 20px;
box-sizing: border-box;
overflow: auto;
background: #ffffff;
border-left: 1px solid #e5e7eb;
}
.panel-header {
padding-bottom: 20px;
border-bottom: 1px solid #eef0f3;
}
.eyebrow {
margin: 0 0 6px;
color: #6b7280;
font-size: 11px;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}
.panel-header h1 {
margin: 0;
font-size: 20px;
font-weight: 650;
line-height: 1.25;
}
.panel-description {
margin: 10px 0 0;
color: #6b7280;
font-size: 13px;
line-height: 1.6;
}
.control-section {
padding: 20px 0;
border-bottom: 1px solid #eef0f3;
}
.control-section:last-child {
border-bottom: 0;
}
.control-section h2 {
margin: 0 0 14px;
color: #374151;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.field {
display: grid;
gap: 7px;
margin-bottom: 14px;
}
.field:last-child {
margin-bottom: 0;
}
label {
color: #374151;
font-size: 13px;
font-weight: 600;
line-height: 1.35;
}
select,
input[type="number"] {
width: 100%;
height: 34px;
padding: 0 10px;
box-sizing: border-box;
color: #111827;
font: inherit;
background: #ffffff;
border: 1px solid #d8dde5;
border-radius: 6px;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
select:focus,
input[type="number"]:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.hint {
margin: 0;
color: #7a8492;
font-size: 12px;
line-height: 1.5;
}
.check-field {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 10px 0;
cursor: pointer;
}
.check-field input {
width: 16px;
height: 16px;
margin: 2px 0 0;
accent-color: #2563eb;
flex: 0 0 auto;
}
.check-field span {
display: grid;
gap: 3px;
}
.check-field strong {
color: #1f2933;
font-size: 13px;
font-weight: 650;
line-height: 1.35;
}
.check-field small {
color: #7a8492;
font-size: 12px;
font-weight: 400;
line-height: 1.45;
}
@media (max-width: 760px) {
.sample-tutorial {
flex-direction: column;
}
.sample-spreadsheets {
min-height: 55%;
}
.options-container {
flex: 0 0 auto;
width: 100%;
height: 45%;
border-top: 1px solid #e5e7eb;
border-left: 0;
}
}
