Virtual Scrolling #512

knpwrs · 2021-06-28T20:24:40Z

knpwrs
Jun 28, 2021

Does the Solid ecosystem have any libraries to support virtual scrolling (ala react-cool-virtual, react-window, or react-virtualized)? If not, are there any generic virtual scrolling libraries that work well with Solid?

Answered by mosheduminer

Jun 28, 2021

I don't think the ecosystem has such libraries yet, but there are some codesandboxes that are basically complete implementations (these were shared a while back on the solid discord by @rturnq ).
https://codesandbox.io/embed/virtualized-list-9dw9q
https://codesandbox.io/embed/virtualized-sheet-8fokq
https://codesandbox.io/embed/virtualized-table-ks63n

When using these, keep in mind that imports of createState from "solid-js" need to be changed to createStore from "solid-js/store" in order to work with the 1.0 release.

View full answer

mosheduminer · 2021-06-28T20:45:51Z

mosheduminer
Jun 28, 2021

I don't think the ecosystem has such libraries yet, but there are some codesandboxes that are basically complete implementations (these were shared a while back on the solid discord by @rturnq ).
https://codesandbox.io/embed/virtualized-list-9dw9q
https://codesandbox.io/embed/virtualized-sheet-8fokq
https://codesandbox.io/embed/virtualized-table-ks63n

When using these, keep in mind that imports of createState from "solid-js" need to be changed to createStore from "solid-js/store" in order to work with the 1.0 release.

0 replies

floer32 · 2022-05-13T18:25:09Z

floer32
May 13, 2022

More recently there's also: https://github.com/minht11/solid-virtual-container (note: I haven't tried it in a production application yet)

0 replies

jchook · 2022-06-13T14:08:02Z

jchook
Jun 13, 2022

@tanstack/solid-virtual looks promising, but still in beta and currently not yet published to NPM.

You could still use the UI-agnostic core and adapt the WIP Solid implementation

0 replies

knpwrs · 2022-06-13T19:16:37Z

knpwrs
Jun 13, 2022
Author

I've been thinking that a generic virtualization engine that could connect to multiple rendering engines would be cool. Not sure how practical that is. Something like https://github.com/wellyshen/react-cool-virtual just not bound to any particular framework.

0 replies

chitoadinugraha · 2023-06-09T07:32:23Z

chitoadinugraha
Jun 9, 2023

I tried to make virtual scrolling usign raw javascript, it support dynamic sized item.

Here is my code

<!DOCTYPE html>

<html>

<head>
    <style>
        #container {
            position: absolute;
            top: 180px;
            left: 80px;
            width: 200px;
            height: 300px;

            border: 1px solid #888;
            overflow: visible;
        }

        #inner {
            position: absolute;
            left: 0;
            right: 0;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="inner"></div>
    </div>


    <script>
        const container = document.getElementById('container');
        const inner = document.getElementById('inner');

        const overscan = 100;
        let originalY = 0;
        let startY = 0;

        let firstChildIdx = 0;
        let lastChildIdx = 0;

        const getItem = (idx) => {
            const div = document.createElement('div');
            div.innerText = 'Item ' + idx;
            return div;
        }

        const updateOffset = () => {
            inner.style.top = `${startY}px`;
        }

        const scrollDown = (dY) => {
            startY -= dY;
            originalY -= dY;

            const fillAfter = () => {
                const containerHeight = container.clientHeight;

                while (startY + inner.clientHeight < containerHeight + overscan) {
                    const item = getItem(lastChildIdx++);
                    inner.append(item);
                }
            }

            const trimBefore = () => {

                while (startY < -overscan) {
                    const firstChild = inner.firstChild;

                    // advance sY
                    startY += firstChild.clientHeight;
                    firstChild.remove();
                    firstChildIdx++
                }

            }

            fillAfter();
            trimBefore();
            updateOffset();
        }

        scrollDown(0);

        const scrollUp = (dY) => {
            console.log('scroll up');
            const containerHeight = container.clientHeight;

            const fillBefore = () => {

                while (startY > -overscan && firstChildIdx > 0) {

                    const idx = --firstChildIdx;
                    const item = getItem(idx);
                    inner.insertBefore(item, inner.firstChild);
                    startY -= item.clientHeight;
                }
            }

            const trimAfter = () => {
                while (startY + inner.clientHeight > containerHeight + overscan) {
                    const lastChild = inner.lastChild;

                    lastChild.remove();
                    lastChildIdx--;
                    // if (lastChildIdx < 0) lastChildIdx = 0;
                }
            }

            if (originalY + dY > 0) {
                startY = 0;
                originalY = 0;

            } else {

                originalY += dY
                startY += dY;

                fillBefore();
            }

            trimAfter();
            updateOffset();
        }

        container.onwheel = (e) => {
            const dY = e.deltaY;

            if (dY > 0) {
                scrollDown(Math.abs(dY))
            } else {
                scrollUp(Math.abs(dY));
            }
        }


    </script>
</body>

</html>

2 replies

Grabber Jun 24, 2023

It doesn't work if you drag the scrollbars nor if you press the up/down or page up/down keys.

If you use the 'scroll' event it works, but on Firefox you will get a warning about the scroll-linked effect.

Grabber Jun 24, 2023

I did some tests that 'onwheel' could be replaced with addEventListener('scroll', ...) and removeEventListener('scroll', ...). Next, call window.requestAnimationFrame(() => { /* update... */})` inside the scroll handler function. It solves the Firefox scroll-linked performance issue and also the console warning!

Most of the virtualized list libraries are not doing it nowadays!

inokawa · 2024-01-28T13:08:33Z

inokawa
Jan 28, 2024

I made a virtualization library supporting dynamic sized items. Its Solid support is newborn but the shared logic is almost mature.
https://github.com/inokawa/virtua

1 reply

onx2 Jun 24, 2024

This is amazing, thank you for releasing!

Brendonovich · 2024-06-04T13:53:58Z

Brendonovich
Jun 4, 2024

It's been mentioned here already but Tanstack's Solid Virtual has been out for a while and has worked great for us.

https://tanstack.com/virtual
https://github.com/tanstack/virtual

0 replies

chitoadinugraha · 2024-09-23T17:01:52Z

chitoadinugraha
Sep 23, 2024

https://solidjs-use.github.io/solidjs-use/core/useVirtualList

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Virtual Scrolling #512

{{title}}

Replies: 8 comments 3 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Virtual Scrolling #512

Replies: 8 comments · 3 replies

knpwrs Jun 13, 2022 Author

Replies: 8 comments 3 replies

knpwrs
Jun 13, 2022
Author