scrollByPixel이 true인 경우 SpreadJS에서 픽셀 단위로 정밀하게 스크롤할 수 있습니다.
또한 scrollByPixel이 true인 경우 한 번에 스크롤되는 픽셀 수를 정의할 수 있습니다. 최종 스크롤 픽셀은 스크롤 델타에 scrollPixel을 곱한 결과입니다. 예를 들어 스크롤 델타는 3이고 scrollPixel이 5이면 최종 스크롤 픽셀은 15입니다.
워크시트 클래스는 지정된 픽셀 단위로 시트를 스크롤할 수 있는 scroll 메소드를 제공합니다.
scroll 메소드에는 vPixels와 hPixels의 두 가지 숫자 매개변수가 있습니다.
vPixels은 수직 방향으로 스크롤할 픽셀을 나타냅니다.
hPixels는 수평 방향으로 스크롤할 픽셀을 나타냅니다.
vPixels가 양수이면 워크시트가 아래로 스크롤되고, vPixels가 음수이면 워크시트가 위로 스크롤되며, vPixels가 0이면 워크시트가 수직 방향으로 스크롤되지 않습니다.
hPixels가 양수이면 워크시트가 오른쪽으로 스크롤되고, hPixels가 음수이면 워크시트가 왼쪽으로 스크롤되며, hPixels가 0이면 워크시트가 수평 방향으로 스크롤되지 않습니다.
워크북의 scrollByPixel 옵션이 true이면 워크시트가 새로운 상단 행/좌측 열 인덱스와 새 상단 행/좌측 열 오프셋으로 스크롤됩니다.
워크북의 scrollByPixel 옵션이 false이면 워크시트가 새로운 상단 행/왼쪽 열 인덱스로 스크롤되고 새 상단 행/왼쪽 열 오프셋은 항상 0입니다.
에서 오프셋 속성을 사용하여 셀의 현재 위치에 대한 정보를 가져올 수 있습니다.
를 사용하면 다음과 같이 할 수 있습니다:
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
/* Binding settings */
var scrollByPixel = _getElementById("scrollByPixel");
scrollByPixel.addEventListener("change", function () {
spread.options.scrollByPixel = scrollByPixel.checked;
});
var scrollPixel = _getElementById("scrollPixel");
_getElementById("setScrollPixel").addEventListener("click", function () {
spread.options.scrollPixel = parseInt(scrollPixel.value);
});
_getElementById("scroll").addEventListener("click", function () {
var vPixels = parseFloat(_getElementById("vPixels").value);
var hPixels = parseFloat(_getElementById("hPixels").value);
var sheet = spread.getActiveSheet();
sheet.scroll(vPixels, hPixels);
});
var intervalID;
_getElementById("autoScroll").addEventListener("click", function () {
if (intervalID) {
window.clearInterval(intervalID);
intervalID = null;
}
var vPixels = parseFloat(_getElementById("vPixels").value);
var hPixels = parseFloat(_getElementById("hPixels").value);
var interval = parseInt(_getElementById("interval").value);
intervalID = setInterval(function () {
var sheet = spread.getActiveSheet();
sheet.scroll(vPixels, hPixels);
}, interval);
});
_getElementById("stopScroll").addEventListener("click", function () {
if (intervalID) {
window.clearInterval(intervalID);
intervalID = null;
}
});
spread.suspendPaint();
spread.options.scrollByPixel = true;
var sheet = spread.getActiveSheet();
//change cells dimensions
sheet.setColumnWidth(0, 150);
sheet.setColumnWidth(4, 100);
sheet.setColumnWidth(5, 430);
sheet.setRowHeight(0, 50);
sheet.setRowHeight(3, 10);
sheet.setRowHeight(10, 100);
sheet.setRowHeight(12, 475);
sheet.resumePaint();
spread.resumePaint();
}
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">
<div class="option-row">
<p>Scroll the spreadsheet to view the pixel scrolling feature. </p>
<p>You can also change the number of pixels scrolled below by entering the number and press Set Scroll Pixel.</p>
<p>To disable this feature, uncheck the option.</p>
<input type="checkbox" id="scrollByPixel" checked="checked" />
<label for="scrollByPixel">Scroll By Pixel</label>
</div>
<div class="option-row">
<input type="number" id="scrollPixel" value="5" />
<input type="button" id="setScrollPixel" value="Set Scroll Pixel" />
</div>
<div class="option-row">
<p>You can also scroll the sheet by specified pixels.</p>
<label>
<input type="number" id="vPixels" value="1">
vPixels
</label>
<label>
<input type="number" id="hPixels" value="0">
hPixels
</label>
<input type="button" id="scroll" value="Scroll">
</div>
<div class="option-row">
<p>If you invoke the scroll method in a timer, the sheet can be scrolled automatically.</p>
<label>
<input type="number" id="interval" value="20">
interval(ms)
</label>
<input type="button" id="autoScroll" value="Automatically Scroll">
<input type="button" id="stopScroll" value="Stop Scroll">
</div>
</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: 3px;
margin: 3px;
}
input[type=number] {
width: 40px;
}
hr {
border-color: #fff;
opacity: .2;
margin-top: 20px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}