svelte-virtual-scroll-list
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.8 • Public • Published

    svelte-virtual-scroll-list

    Svelte implementation of vue library vue-virtual-scroll-list

    Virtualized scrolling for big lists


    Support dynamic both-directional lists (see example)


    Online demo: https://v1ack.github.io/svelte-virtual-scroll-list/

    Simple example in Svelte REPL

    API

    Props

    prop type default description
    data object[] null Source for list
    key string id Unique key for getting data from data
    keeps number 30 Count of rendered items
    estimateSize number estimateSize Estimate size of each item, needs for smooth scrollbar
    isHorizontal boolean false Scroll direction
    pageMode boolean false Let virtual list using global document to scroll through the list
    start number 0 scroll position start index
    offset number 0 scroll position offset
    topThreshold number 0 The threshold to emit top event, attention to multiple calls.
    bottomThreshold number 0 The threshold to emit bottom event, attention to multiple calls.

    Methods

    Access to methods by component binding

    Binding example
    <script>
        let vs
    </script>
    
    <VirtualScroll bind:this={vs}></VirtualScroll>
    <button on:click={vs.scrollToBottom}>To bottom</button>
    method arguments description
    scrollToBottom none Scroll list to bottom
    scrollToIndex index: number Set scroll position to a designated index
    scrollToOffset offset: number Set scroll position to a designated offset
    getSize id: typeof props.key Get the designated item size
    getSizes none Get the total number of stored (rendered) items
    getOffset none Get current scroll offset
    getClientSize none Get wrapper element client viewport size (width or height)
    getScrollSize none Get all scroll size (scrollHeight or scrollWidth)
    updatePageModeFront none When using page mode and virtual list root element offsetTop or offsetLeft change, you need call this method manually

    Events

    event description
    scroll Scroll event
    top Top of the list reached
    bottom Bottom of the list reached

    Install

    npm i svelte-virtual-scroll-list

    DownloadsWeekly Downloads

    132

    Version

    1.0.8

    License

    none

    Unpacked Size

    93.9 kB

    Total Files

    10

    Last publish

    Collaborators

    • v1ack