SpreadJS will enable precision scrolling by pixel when scrollByPixel is true.
In addition, you can also define the number of pixels that are scrolled at a time when scrollByPixel is true.
The final scrolling pixels are the result of scrolling delta multiplied by scrollPixel.
For example, the scrolling delta is 3, and the scrollPixel is 5, the final scrolling pixels are 15.
The Worksheet class provides a scroll method to scroll the sheet by specified pixels.
The scroll method has 2 number parameters, vPixels and hPixels.
The vPixels represents the pixels to scroll in vertical direction.
The hPixels represents the pixels to scroll in horizontal direction.
When vPixels is positive, worksheet will scroll down; when vPixels is negative, worksheet will scroll up; when vPixels is 0, worksheet won't scroll in vertical direction.
When hPixels is positive, worksheet will scroll right; when hPixels is negative, worksheet will scroll left; when hPixels is 0, worksheet won't scroll in horizontal direction.
When the Workbook’s scrollByPixel option is set to true, the worksheet will scroll to the new top row/left column index and the new top row/left column offset.
When Workbook's option scrollByPixel is false, worksheet will scroll to new top row/left column index, and new top row/left column offset will be always 0.
in TopRowChanged / LeftColumnChanged event, you can use offset attributes to get info of current position in cell.
if you want to use the oldOffset/newOffset attributes, you can do like this:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
<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" @change="setScrollByPixel" />
<label for="scrollByPixel">Scroll By Pixel</label>
</div>
<div class="option-row">
<input type="number" id="scrollPixel" value="5" @change="changeScrollPixel" />
<input type="button" id="setScrollPixel" value="Set Scroll Pixel" @click="setScrollPixel" />
</div>
<div class="option-row">
<p>You can also scroll the sheet by specified pixels.</p>
<label>
<input type="number" id="vPixels" value="1" @change="changeVPixels">
vPixels
</label>
<label>
<input type="number" id="hPixels" value="0" @change="changeHPixels">
hPixels
</label>
<input type="button" id="scroll" value="Scroll" @click="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" @change="changeInterval">
interval(ms)
</label>
<input type="button" id="autoScroll" value="Automatically Scroll" @click="autoScroll">
<input type="button" id="stopScroll" value="Stop Scroll" @click="stopScroll">
</div>
</div>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import { ref } from "vue";
import "@mescius/spread-sheets-vue";
let spread = null;
const scrollPixel = ref(5);
const vPixels = ref(1);
const hPixels = ref(0);
const interval = ref(20);
let intervalID = 0;
const initSpread = (s) => {
spread = s;
spread.suspendPaint();
spread.options.scrollByPixel = true;
const 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);
spread.resumePaint();
};
const setScrollByPixel = (e) => {
spread.options.scrollByPixel = e.target.checked;
}
const changeScrollPixel = (e) => {
scrollPixel.value = parseInt(e.target.value);
}
const setScrollPixel = (e) => {
spread.options.scrollPixel = scrollPixel.value;
}
const changeVPixels = (e) => {
vPixels.value = parseFloat(e.target.value);
}
const changeHPixels = (e) => {
hPixels.value = parseFloat(e.target.value);
}
const scroll = (e) => {
let sheet = spread.getActiveSheet();
sheet.scroll(vPixels.value, hPixels.value);
}
const changeInterval = (e) => {
interval.value = parseInt(e.target.value);
}
const autoScroll = (e) => {
if (intervalID) {
window.clearInterval(intervalID);
intervalID = null;
}
intervalID = setInterval(function () {
let sheet = spread.getActiveSheet();
sheet.scroll(vPixels.value, hPixels.value);
}, interval);
}
const stopScroll = (e) => {
if (intervalID) {
window.clearInterval(intervalID);
intervalID = null;
}
}
</script>
<style scoped>
#app {
height: 100%;
}
.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;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-en': 'npm:@mescius/spread-sheets-resources-en/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
