Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

suggestion: Controlled scrolling #59

Open
marc2332 opened this issue Dec 3, 2022 · 1 comment · May be fixed by #367
Open

suggestion: Controlled scrolling #59

marc2332 opened this issue Dec 3, 2022 · 1 comment · May be fixed by #367
Assignees
@marc2332
Labels
enhancement 🔥 New feature or request

Comments

@marc2332
Copy link
Owner

marc2332 commented Dec 3, 2022 •
edited

Actual implementation https://github.com/marc2332/freya-editor/blob/main/src/controlled_virtual_scroll_view.rs

Currently, both ScrollView and VirtualScrollView have uncontrolled scrolling, meaning you cannot manually control the behavior/state of their scroll.

This could be a good way to make the scrolling optionally controllable:

fn app(cx: Scope) -> Element {
    let scroll_controller = use_new_scroll_controller();

    render!(
        rect {
            height: "100%",
            width: "100%",
            padding: "100",
            background: "white",
            Button {
                onclick: move |_| scroll_controller.scroll_to_bottom(),
                label {
                    "Scroll to bottom"
                }
            }
            ScrollView {
                controller: scroll_controller,
                show_scrollbar: true,
                rect {
                    height: "100%",
                    width: "100%",
                    background: "rgb(27, 38, 59)",
                    padding: "25",
                    onclick: move |_| scroll_controller.scroll_to(0),
                    label { "Click to go up" }
                }
            }
        }
    )
}

Both ScrollView and VirtualScrollView would have an option parameter that would accept a trait object that implements a certain trait that controls how the scroll behaves and would also allow to modify the current scroll position.

Maybe it could even be accessed by their children if it was passed via a context provider.

fn app(cx: Scope) -> Element {
    let scroll_controller = use_new_scroll_controller();
    
    // internally calls use_context_provider
    scroll_controller.provide(&cx);

    render!(
        rect {
            height: "100%",
            width: "100%",
            padding: "100",
            background: "white",
            ScrollView {
                controller: scroll_controller,
                show_scrollbar: true,
                CoolComponent { },
                rect {
                    height: "100%",
                    width: "100%",
                    background: "rgb(27, 38, 59)",
                    padding: "25",
                    onclick: move |_| scroll_controller.scroll_to(0),
                    label { "Click to go up" }
                }
            }
        }
    )
}

#[allow(non_snake_case)]
fn CoolComponent(cx: Scope) -> Element {
   let scroll_component = use_scroll_controller(&cx);

   render!(
     Button {
        onclick: move |_| scroll_controller.scroll_to_bottom(),
        label {
            "Scroll to bottom"
        }
    }
  )
}
@marc2332 marc2332 added the enhancement 🔥 New feature or request label Dec 3, 2022
@marc2332 marc2332 self-assigned this Dec 3, 2022
@gabemeola
Copy link

Would be useful as well for infinite scroll pagination.

@marc2332 marc2332 mentioned this issue Jun 11, 2023
Closed
@marc2332 marc2332 linked a pull request Nov 4, 2023 that will close this issue
Draft
@marc2332 marc2332 mentioned this issue Nov 18, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@marc2332 marc2332

Labels
enhancement 🔥 New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: Scroll controller marc2332/freya
feat: use_scroll hook marc2332/freya
2 participants
@gabemeola @marc2332