The code of touch scroll in mobile (only readonly mode) 移动端触摸滚动的滚动实现（仅只读模式）

[yooyea]

Vue example:

<template>
    <div style="width:100%">
        <div style="height: 20px;width:100%;gap:6px;display: flex;">
            <span @click="save" style="cursor: pointer;">save</span>
            <span @click="load" style="cursor: pointer;">load</span>
        </div>
        <div style="width: 100%;height: calc(100% - 20px)" id="univer-parent-container">
            <div id="univer-container">
            </div>
        </div>
    </div>
</template>

<script>
import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/docs-ui/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/sheets-formula/lib/index.css";
import "@univerjs/sheets-conditional-formatting-ui/lib/index.css";

import { Univer, UniverInstanceType } from "@univerjs/core";
import { defaultTheme, } from "@univerjs/design";

import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";

import { UniverUIPlugin } from "@univerjs/ui";

import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";

import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";

import { UniverSheetsConditionalFormattingUIPlugin } from '@univerjs/sheets-conditional-formatting-ui';
import { FUniver } from "@univerjs/facade";


export default {
    name: 'UniverComponent',
    data() {
        return {
            unit: null,
            data: null,
            univerAPI: null
        }
    },
    methods: {
        async init() {
            const univer = new Univer({ theme: defaultTheme });
            univer.registerPlugin(UniverRenderEnginePlugin);
            univer.registerPlugin(UniverFormulaEnginePlugin);
            univer.registerPlugin(UniverSheetsConditionalFormattingUIPlugin);
            univer.registerPlugin(UniverUIPlugin, { container: 'univer-container', header: true, footer: true, });
            univer.registerPlugin(UniverDocsPlugin, { hasScroll: false, });
            univer.registerPlugin(UniverDocsUIPlugin);
            univer.registerPlugin(UniverSheetsPlugin);
            univer.registerPlugin(UniverSheetsUIPlugin);
            univer.registerPlugin(UniverSheetsFormulaPlugin);
            // create univer sheet instance
            let v = localStorage.getItem('v')
            v = v ? JSON.parse(v) : {}
            this.unit = univer.createUnit(UniverInstanceType.UNIVER_SHEET, v);
            // this.unitId = unit.getUnitId()
            this.univerAPI = FUniver.newAPI(univer);
        },
        save() {
            this.data = this.unit.save()
            localStorage.setItem('v', JSON.stringify(this.data))
        },
        load() {
            if (this.data) {
                console.log(this.data);
                console.log(this.unit.load(this.data));
            }
        },
        initReadOnly(){
            // disabled all events for univer container
            const el = document.getElementById('univer-container')
            el.style.pointerEvents = 'none'

            // define a custom error
            class AbortCommandError extends Error {
                constructor() {
                    super('Command blocked from execution');
                    this.name = 'AbortCommandError';
                }
            }
            // listen to the error event and prevent the default behavior
            const errListener = (e) => {
                console.log(e instanceof PromiseRejectionEvent);
                const error = e instanceof PromiseRejectionEvent ? e.reason : e.error
                // console.log(error instanceof AbortCommandError);
                if (error instanceof AbortCommandError) {
                    e.preventDefault();
                    console.warn(error.message);
                }
            }
            window.addEventListener('error', errListener);
            window.addEventListener('unhandledrejection', errListener);

            this.univerAPI.onBeforeCommandExecute((command) => {
                console.log(command);
                // you can also decide whether to block it or not by adding judgment to the situation.
                if(command.id === 'sheet.operation.set-scroll'){
                    return
                }
                throw new AbortCommandError();
            })
        },
        handleTouchEvent(){
            // log
            console.log(this.unit.getUnitId());
            console.log(this.unit.getActiveSheet().getSheetId());
            console.log(this.unit.getActiveSheet());
            console.log(this.unit);
            let startx = 0;
            let starty = 0;
            let x = 0
            let y = 0
            const overlayerTouch = (direction, distance) => {
                console.log(direction, distance);
                if (direction === 'left' || direction === 'right') {
                x = Math.max(x - distance, 0)
            
                } else if (direction === 'up' || direction === 'down') {
                y = Math.max(y - distance,0)
                }
                this.univerAPI.executeCommand('sheet.operation.set-scroll', {
                    "unitId": this.unit.getUnitId(),
                    "sheetId": this.unit.getActiveSheet().getSheetId(),
                    "sheetViewStartRow": 0,
                    "sheetViewStartColumn": 0,
                    "offsetX": x,
                    "offsetY": y
                });
            }
            const calTouchDirection = (spanx, spany, evt, cb) => {
                const directionX = spanx > 0 ? 'right' : 'left';
                cb(directionX, spanx, evt);
                const directionY = spany > 0 ? 'down' : 'up';
                cb(directionY, spany, evt);
                console.log('spanx:', spanx, ', spany:', spany);
            }

            const univerParentContainer = document.getElementById('univer-parent-container')
            univerParentContainer.addEventListener('touchmove', (evt) => {
                const { pageX, pageY } = evt.changedTouches[0];
                const spanx = pageX - startx;
                const spany = pageY - starty;
                if (Math.abs(spanx) > 10 || Math.abs(spany) > 10) {
                    // console.log('spanx:', spanx, ', spany:', spany);
                    calTouchDirection(spanx, spany, evt, (direction, d) => {
                        overlayerTouch(direction, d)
                    });
                    startx = pageX;
                    starty = pageY;
                    console.log('startx:', startx, ', starty:', starty);
                }
                evt.preventDefault();
            })
            univerParentContainer.addEventListener('touchstart', (evt) => {
                const { pageX, pageY } = evt.touches[0];
                startx = pageX;
                starty = pageY;
            })
        }
    },
    mounted() {
        this.init()
        this.initReadOnly()
        this.handleTouchEvent()
        // zoom
        // this.univerAPI.executeCommand('sheet.command.set-zoom-ratio', {
        //     "unitId": this.unit.getUnitId(),
        //     "subUnitId": this.unit.getActiveSheet().getSheetId(),
        //     "zoomRatio": 2
        // });
    }
}
</script>

<style lang="less">
#univer-container,
.univer-app-layout {
    width: 100%;
    height: 100%;
}
</style>