사용자는 세로 스크롤 막대의 화살표 버튼을 사용하여 한 번에 한 행씩 위나 아래로 스크롤하고, 가로 스크롤 막대의 경우 한 번에 한 열씩 스크롤할 수 있습니다. 스크롤 상자를 끌면 더 빠르게 스크롤할 수 있습니다. 가장 빠르게 스크롤하려면 스크롤 막대의 상자와 화살표 버튼 사이 공간을 클릭하여 시트를 페이지 단위로 스크롤할 수 있습니다.
SpreadJS 스크롤 막대는 기본적으로 표시되지만, Workbook 개체의 showVerticalScrollbar 및 showHorizontalScrollbar 옵션을 false로 설정하여 비활성화할 수 있습니다.
사용자가 스크롤 막대 상자를 끌 때 스크롤 팁을 표시할 수 있습니다. 세로 스크롤 막대에서 활성화하면 스크롤 상자를 끄는 동안 보이는 맨 위 행이 표시됩니다. 마찬가지로 가로 스크롤 막대에서 활성화하면 보이는 맨 왼쪽 열이 표시됩니다. 스크롤 팁은 통합 문서의 showScrollTip 옵션을 사용하여 활성화합니다.
스크롤 상자 컨테이너 제어
일반적으로 사용자가 활성 시트의 마지막 행이나 열을 지나 스크롤하면 시트의 빈 영역이 표시될 수 있습니다. 특정 행이나 열이 있는 활성 시트 영역까지만 스크롤을 제한하려면 scrollbarMaxAlign 옵션을 사용합니다.
빠른 스크롤을 사용하는 경우 스크롤 상자 컨테이너의 크기는 사용자가 시트의 마지막 행이나 열에 도달하기 위해 얼마나 스크롤해야 하는지를 시각적으로 나타냅니다. 이 컨테이너 크기는 다음 두 옵션으로 제어할 수 있습니다. scrollbarShowMax는 활성 시트의 전체 행 또는 열 수를 기준으로 컨테이너 크기를 계산하고, scrollIgnoreHidden은 스크롤 상자 컨테이너 크기 계산에서 숨겨진 행이나 열을 제외합니다.
다음 항목은 숨겨진 항목으로 처리됩니다.
높이가 0인 행
너비가 0인 열
숨겨진 행 또는 열
축소된 그룹에 포함된 행 또는 열
필터링된 행 또는 목록에서 필터링된 행
자동 스크롤 막대 표시
스크롤 막대는 표시 여부를 자동으로 제어하여 최신 UI에 맞는 사용자 친화적 동작을 제공하는 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="ko-kr">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.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>
<div class="options-container">
<p> Change the different properties below to see how it affects the different aspects of the workbook scrollbars.</p>
<div class="option-row">
<label>showScrollTip:</label>
<select id="optShowScrollTip" >
<option value="0" selected="selected">None</option>
<option value="1">Horizontal</option>
<option value="2">Vertical</option>
<option value="3">Both</option>
</select>
</div>
<hr/>
<div class="option-row">
<label for="columnCount">Column Count:</label>
<input type="number" id="columnCount" min="1" value="20" style="width: 100px; height: 19px; padding: 0; box-sizing: border-box;" />
</div>
<div class="option-row">
<label for="showHorizontalScrollbar">Horizontal Scrollbar:</label>
<select id="showHorizontalScrollbar">
<option value="true" selected>Show</option>
<option value="false">Hide</option>
<option value="auto">Auto</option>
</select>
</div>
<label>Set the horizontal scrollbar visibility. Use 'auto' for automatic visibility.</label>
<div class="option-row">
<label for="rowCount">Row Count:</label>
<input type="number" id="rowCount" min="1" value="200" style="width: 100px; height: 19px; padding: 0; box-sizing: border-box;" />
</div>
<div class="option-row">
<label for="showVerticalScrollbar">Vertical Scrollbar:</label>
<select id="showVerticalScrollbar">
<option value="true" selected>Show</option>
<option value="false">Hide</option>
<option value="auto">Auto</option>
</select>
</div>
<label>Set the vertical scrollbar visibility. Use 'auto' for automatic visibility.</label>
<div class="option-row">
<input type="checkbox" id="scrollbarMaxAlign"/>
<label for="scrollbarMaxAlign">Scrollbar Max Align</label>
</div>
<label >Set this to restrict the scrolling to the max number of rows/columns.</label>
<div class="option-row">
<input type="checkbox" id="scrollbarShowMax" checked="checked"/>
<label for="scrollbarShowMax">Scrollbar Show Max</label>
</div>
<label >Set this to have the scrollbar show the max scroll space.</label>
<hr/>
<div class="option-row">
<input type="checkbox" id="scrollIgnoreHidden"/>
<label for="scrollIgnoreHidden">Scroll Ignore Hidden</label>
</div>
<label >Set this to ignore the hidden rows or columns.</label>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.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 select {
width: 100px;
}
label {
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
}
hr {
border-color: #fff;
opacity: .2;
margin-top: 20px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
