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>
    import { Button } from "@svar-ui/svelte-core";
    import { Grid } from "@svar-ui/svelte-grid";
    import { repeatData, repeatColumns } from "./common/data";

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

    let api = $state();
    function doScrollTo(top, left) {
        api.exec("scroll-to", { top, left });
    }
</script>

<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 bind:this={api} {data} {columns} split={{ left: 1 }} />

Related articles: