no scroll bars

[johnny-smitherson]

I don't see any scroll bars when the HTML element overflows.

I can implement scrollbar myself, but I don't see any onscroll events showing up in my element when it overflows.

I see the onscroll event should be implemented as per #304 but the events don't show up in my tests.

I am using dioxus 0.7.3 with its native feature and dependency blitz-dom=0.2.4

Tested under both windows 11 and linux wayland, no scroll bars, no scroll events.

Here is some dioxus component to repro issue:

rsx! {
            div {
                style: "
                    width: 100vw;
                    height: 100vh;
                    overflow: scroll;
                ",
                
                onscroll: move |_e| {
                    info!("onscroll {:?}", _e.data());
                },
                onscrollend: move |_e| {
                    info!("onscrollnd {:?}", _e.data());
                },
                onmounted: move |_e| {
                    info!("onmounted {:#?}", _e.data());
                },
                onresize: move |_e| {
                    info!("onresize {:#?}", _e.data());
                },

                div {
                    for i in 0..100 {
                        h1 {
                            "Test {i}"
                        }
                    }
                }
            }
}

[nicoburns]

Scrollbars aren't implemented. And I don't think scrollend is either.

For scroll events, I think you're just using a version of Blitz that's older than the PR that implemented them. You might consider using the git version as described here: https://github.com/dioxuslabs/blitz#using-the-git-verison-of-dioxus-native

[johnny-smitherson]

Yes, spotted that after opening the ticket - I see the events now. 👍

Still, now looking at the roadmap, I see there is no programmatic scrolling (window.scroll() / window.scrollBy()), which means no dragging on the scrollbar.

And no resize events, that means scrollbar will be out of date until next scroll. I guess you'd need those to implement scroll bars, regardless if on the library side or on the client side.

[nicoburns]

Programmatic scrolling is on the roadmap. You just need to... scroll down ;). Perhaps it should be moved up. I don't think it's that hard, but you're the first person to ask for it.

Regarding resize events, do you need window.onresize or resize observers (I believe dioxus onresize events are the latter).

[johnny-smitherson]

Perhaps it should be moved up.

I see the scrollbars as very basic functionality, it's glaring once you render more than a screen full - no desktop end user would understand or accept that it's missing, even for very basic prototypes.

I don't think it's that hard, but you're the first person to ask for it.

It might be hard once you get into the details of scrolling element inside scrolling element. In any case, I see how you have bigger priorities than that, like having access the events that you can use to implement a scrollbar on the app side, then using those events to add it

And then you have the 25+ css attributes to control scrolling and scrollbar https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-behavior - very thick indeed :)

Regarding resize events, do you need window.onresize or resize observers (I believe dioxus onresize events are the latter).

There's no window because there's no JS at all, right? The dioxus API is enough, definitely. Still, for programmatic scrolling, I assumed dioxus didn't have it and you had to use window.scroll, but now I see it's here

https://docs.rs/dioxus/latest/dioxus/events/struct.MountedData.html#method.scroll_to_with_options

https://docs.rs/dioxus/latest/dioxus/events/struct.ScrollToOptions.html

You can pass the coordinates there in the options there. So I've no interest in the window.* JS api at all.