Handle scrolling pane within a page

[Webreaper]

Thanks for the proof-of-concept.

I modified your code a little so that it works for a scrolling div within a page, which is a more likely use-case than the entire page scrolling. I attach this handler to the element, rather than the document, and it now scrolls down and lazy loads when the div is scrolled to the bottom. I simplified the JS a tiny bit too.

window.InfiniteScroll = {
            Init: function (eleId, DotNetRef) {
                var el = document.getElementById(eleId);
                el.addEventListener('scroll', function () {
                    if ((el.scrollHeight - el.clientHeight - el.clientTop) - el.scrollTop < 1) {
                        DotNetRef.invokeMethodAsync("LoadMore");
                    }
                });
            }
        }

[shashikantx]

@Webreaper could you please explain what the line if ((el.scrollHeight - el.clientHeight - el.clientTop) - el.scrollTop < 1) means ?

and also as Blazor doesn't reload base html on navigation, once you initialize a scroll listener it stays active throughout the session, hence it will keep calling LoadMore on every scroll event even when we are on different section of site. So it is not good an idea to add event listener through anonymous function, cause we won't be able to remove the listener later that way.

[shashikantx]

aah, I just figured out, it is problematic to initiate the on scroll event listener only when the element is body , because body doesn't change on navigation, but it can be attached to element such as div and we can get away with it without it invoking the dotnet function in component on scroll in different pages.

But even then what if we have to make it work in both situations? When attached to body or Div like element?

[Webreaper]

If my understanding is right, when you switch pages the div will be destroyed with the re-render, which means the listener will be disposed and not called when we're not on the page. You may know better than me though, as I'm new to Blazor (only found out it existed 3 weeks ago!). :)

And yes, I think the code might need to be different for doc-scrolling vs element scrolling. They're two different use-cases, so writing a generic case may be complicated and more effort than is worth. My code is working though, but I haven't tested it in huge detail yet.

The line you mention is the calculation of whether the div has been scrolled to the bottom, from the accepted answer here: https://stackoverflow.com/questions/24356463/check-if-div-is-scrolled-to-bottom-leave-alone-if-not (but with a tweak that may not be correct ;))

[shashikantx]

You are right about the rendering part, I was just also talking about the use case where body scrolling might be required.

But about the JS event listener part, I Js is not dynamic according to official site. Hence we declare it in Index/_Host page. Therefore, the <script> never changes and also Js executions don't close themselves.

I even tested and found with my example that the scroll event persisted even when we navigated to next page. That is why I had to use removeeventlistener as soon as I left page.

I am also new to Blazor, found it very early on, but have been working on it since last two months, that is all. I am here to learn as well. Hope Blazor grows some traction.

[YaarPatandarAA]

I modified your code a little so that it works for a scrolling div within a page, which is a more likely use-case than the entire page scrolling. I attach this handler to the element, rather than the document, and it now scrolls down and lazy loads when the div is scrolled to the bottom.

Can you share code? Would like an example of how you have it working with a div.
Thanks.

[Webreaper]

Can you share code? Would like an example of how you have it working with a div.

I shared the important piece of code above in the post to which you replied. I'll be open-sourcing the app that I developed in the next couple of months.