사용자는 세로 스크롤 막대의 화살표 버튼을 사용하여 한 번에 한 행을 위로 또는 아래로 스크롤하고 가로 스크롤 막대의 경우 한 번에 한 열을 스크롤할 수 있습니다. 스크롤 막대 상자를 선택한 채 끌면 더 빠르게 스크롤할 수 있습니다. 스크롤하는 가장 빠른 방법은 스크롤 막대의 상자와 행이 아닌 페이지별로 시트를 스크롤하는 화살표 버튼 사이의 공간인 스크롤 상자 컨테이너를 클릭하는 것입니다.
SpreadJS 스크롤 막대는 기본적으로 활성화되지만 Workbook 개체의 showVerticalScrollbar 및 showHorizontalScrollbar 메서드를 false로 설정하여 비활성화할 수 있습니다.
사용자가 스크롤 막대의 상자를 끌 때 스크롤 막대에 도구 설명이 표시될 수 있습니다. 세로 스크롤 막대에서 활성화된 경우 스크롤 팁은 세로 스크롤 막대의 상자를 끄는 동안 보기에 맨 위 행을 표시합니다. 마찬가지로 스크롤 팁은 가로 스크롤 막대 상자를 끄는 동안 보기에 맨 왼쪽 열을 표시합니다. 스크롤 팁은 통합 문서의 showScrollTip 옵션을 사용하여 활성화됩니다.
스크롤 상자 컨테이너 제어
일반적으로 사용자가 활성 시트의 마지막 행 또는 열을 지나서 스크롤하면 시트의 빈 영역이 보기에 표시될 수 있습니다. 설정할 한 가지 유용한 통합 문서 옵션은 활성화될 때 행 또는 열이 있는 활성 시트의 영역까지 스크롤을 제한하는 scrollbarMaxAlign 옵션입니다.
빠른 스크롤을 위해 사용하는 것 외에도 스크롤 상자 컨테이너의 크기는 사용자가 시트의 맨 위 또는 맨 아래에 도달하기 위해 스크롤해야 하는 양을 나타내는 시각적 표시기입니다. 이 컨테이너의 크기는 다음 두 가지 옵션으로 제어할 수 있습니다. 첫 번째 옵션은 활성 시트의 전체 행 또는 열 수에 따라 컨테이너 크기를 계산하는 scrollbarShowMax입니다. 두 번째는 상자 컨테이너 크기 계산에서 숨겨진 행 또는 열을 무시하는 scrollIgnoreHidden입니다.
다음 항목은 숨김으로 처리됩니다.
0 높이 행.
0 높이 열.
숨겨진 행 또는 열.
축소된 그룹에 포함된 행 또는 열.
필터링된 표 또는 목록의 필터링된 행.
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
/* Binding settings */
_getElementById('showHorizontalScrollbar').addEventListener('change', function() {
spread.options.showHorizontalScrollbar = this.checked;
});
_getElementById('showVerticalScrollbar').addEventListener('change', function() {
spread.options.showVerticalScrollbar = this.checked;
});
_getElementById('scrollbarMaxAlign').addEventListener('change', function() {
spread.options.scrollbarMaxAlign = this.checked;
});
_getElementById('scrollbarShowMax').addEventListener('change', function() {
spread.options.scrollbarShowMax = 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;
});
var sheet = spread.getActiveSheet();
}
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$/spread/source/data/data.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/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">
<input type="checkbox" id="showHorizontalScrollbar" checked="checked" />
<label for="showHorizontalScrollbar">Horizontal Scrollbar</label>
</div>
<label >Set this to have the horizontal scrollbar show.</label>
<div class="option-row">
<input type="checkbox" id="showVerticalScrollbar" checked="checked" />
<label for="showVerticalScrollbar">Vertical Scrollbar</label>
</div>
<label >Set this to have the vertical scrollbar show.</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;
}
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;
}