Skip to main content

scroll-to

Description​

Scrolls the table to a specified pixel offset

Use scroll-to for pixel-based scrolling. To scroll to a specific row or column by ID, use the scroll action instead.

Usage​

"scroll-to": ({
    top?: number,
    left?: number,
}) => boolean | void;

Parameters​

The callback of the action takes an object with the following parameters:

  • top - (optional) the vertical scroll offset in pixels
  • left - (optional) the horizontal scroll offset in pixels

Returning false from the event handler will block scrolling within the table.

Example​

The example below shows how to scroll the table to a specific pixel offset on a button click.

<script setup>
    import { Button } from "@svar-ui/vue-core";
    import { Grid } from "@svar-ui/vue-grid";
    import { repeatData, repeatColumns } from "./common/data";
    import { ref } from "vue";

    const data = repeatData(1000);
    const columns = repeatColumns(100);

    const api = ref();
    function doScrollTo(top, left) {
        api.value.exec("scroll-to", { top, left });
    }
</script>

<template>
    <Button type="primary" :onclick="() => doScrollTo(5000, 0)">
        Scroll to top: 5000
    </Button>
    <Button type="primary" :onclick="() => doScrollTo(0, 2000)">
        Scroll to left: 2000
    </Button>
    <Button type="primary" :onclick="() => doScrollTo(0, 0)">
        Scroll to top-left corner
    </Button>

    <Grid ref="api" :data="data" :columns="columns" :split="{ left: 1 }" />
</template>

Related articles: