How to know if a container is scrolled to its end?

[labo-China]

Hello. I`m working on a TUI client for a music platform.

A widget in a ScrollableContainer would display songlists of a user. I want to figure out a way to know whether the container is scrolled to its end so that I can load more songlists from web APIs and add them at the bottom.
All in all, I expect it to work like below:
(1) function being called when scrolling (by using reactive watchers)
(2) load songlists when scrolled to end (HOW TO DO IT?)

I have difficulty with the Region concept and I think it might be helpful. Is there a way to calculate it out?
I have implemented a similar feature with DataTable by dealing with Cursor.(btw, sometimes cursor moves out of screen and I am not able to make the container scroll automatically to keep the cursor visible)

Any help is welcome :)

[willmcgugan]

I think you can use this condition to know if you are at the end of a container: self.scroll_offset.y = self.max_scroll_y

[TomJGooding]

This is a really interesting idea! Here's my quick and dirty implementation:

from __future__ import annotations

from textual import on
from textual.app import App, ComposeResult
from textual.containers import ScrollableContainer
from textual.message import Message
from textual.reactive import var
from textual.widgets import Label


class InfiniteScroll(ScrollableContainer):
    has_reached_bottom = var(False, init=False)

    class HasReachedBottom(Message):
        def __init__(self, infitite_scroll: InfiniteScroll) -> None:
            self.infinite_scroll = infitite_scroll
            super().__init__()

    def compute_has_reached_bottom(self) -> bool:
        return self.scroll_offset.y == self.max_scroll_y

    def watch_has_reached_bottom(self, has_reached_bottom: bool) -> None:
        if has_reached_bottom is True:
            self.styles.border = ("tall", "red")
            self.post_message(self.HasReachedBottom(self))
        else:
            self.styles.border = ("tall", "transparent")


class InfiniteScrollApp(App):
    CSS = """
    Screen {
        align: center middle;
    }

    InfiniteScroll {
        width: 32;
        height: 12;
        border: tall transparent;
    }
    """

    def compose(self) -> ComposeResult:
        with InfiniteScroll():
            for i in range(1, 21):
                yield Label(f"Item #{i}")

    @on(InfiniteScroll.HasReachedBottom)
    def load_next_items(self, event: InfiniteScroll.HasReachedBottom) -> None:
        infinite_scroll: InfiniteScroll = event.infinite_scroll
        number_of_items: int = len(infinite_scroll.children)
        for i in range(number_of_items + 1, number_of_items + 21):
            infinite_scroll.mount(Label(f"Item #{i}"))


if __name__ == "__main__":
    app = InfiniteScrollApp()
    app.run()