Event when nearing the end of the scroll list

[masikh]

Dear Yeger,

First of all thanks for your prompt reply fixing the bug in 5.0.9, loved it! I have a feature request (if possible). I have a large movie collection that needs paginated loading from the server. When I scroll down in the list of movies I obviously need to make a call to the server once in a while for the next page. Currently I need some dirty detection like x amount of pixels from the bottom etc... Dirty!

My feature request is to emit an (optional!) event when the last - X element is in the viewable window. This could help me trigger a next-page load in due time and would really enhance the scrolling experience. I made a screenshot to make it more clear, I hope ;) Maybe something like threshold would be a suitable parameter name, e.g.:

    <masonry-wall 
        :items="items" 
        :ssr-columns="1" 
        :column-width="300" 
        :gap="16" 
        :threshold="40"  
        @threshold="fetch-next"
    />

Maybe my idea is rubbish and a far better solution already exist. Please let me know.

Some code snippets that might help: (source: GPT)

You can detect if an element is in the viewable window (visible on the screen) by checking its position relative to the viewport. Here's a basic approach using JavaScript:

    function isInViewport(element) {
        const rect = element.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }

This isInViewport function takes an element as input and returns true if it is completely within the viewport, and false otherwise. It uses the getBoundingClientRect method to get the position and dimensions of the element relative to the viewport.

Here's how the function works:

• rect.top >= 0: Checks if the top edge of the element is above the bottom edge of the viewport.
• rect.left >= 0: Checks if the left edge of the element is to the left of the right edge of the viewport.
• rect.bottom <= (window.innerHeight || document.documentElement.clientHeight): Checks if the bottom edge of the element is below the top edge of the viewport.
• rect.right <= (window.innerWidth || document.documentElement.clientWidth): Checks if the right edge of the element is to the right of the left edge of the viewport.

You can use this function to determine if any element is currently visible on the screen. For example:

    const element = document.getElementById('your-element-id');
    if (isInViewport(element)) {
        console.log('Element is in the viewport!');
    } else {
        console.log('Element is not in the viewport!');
    }

This approach provides a simple and effective way to detect if an element is within the viewable window using JavaScript, according to GPT ;)

Kind Regards,

Robert

[DerYeger]

This is easily achievable on your end by using an IntersectionObserver to check if any content below the masonry wall component is visible.
If that item starts intersecting with the viewport, just add new entries to items.

[masikh]

Hi Yeger, Thank you very much for that pointer! Kind regards, Robert

…

On 13 May 2024, at 20:09, Jan Müller ***@***.***> wrote: This is easily achievable on your end by using an IntersectionObserver to check if any content below the masonry wall component is visible. If that item starts intersecting with the viewport, just add new entries to items. — Reply to this email directly, view it on GitHub <#282 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAF4Y2YDYWFHQAVJU4H2SBDZCD6U5AVCNFSM6AAAAABHNX2KMKVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TIMRUGYZTC>. You are receiving this because you authored the thread.