Scroll to me vs. show rows in scroll area

[bertiqwerty]

Hi there,

I am rather new to GUI programming and Egui. I really appreciate the ease of use! My issue is the following. I am using a ScrollArea with many labels (sometimes several thousands or more). Due to performance reasons I would like to use ScrollArea::show_rows. However, then I cannot do scroll_to_me on the labels that are not in one of the rows of the current row_range. I think, I would need to scroll the ScrollArea programmatically to where my label in question is but I have not figured out how to do that. I played around, e.g., with Ui::scroll_with_delta or ScrollArea::horizontal_scroll_offset without really understanding from the docs what they are supposed to do and without success. If I use ScrollArea::show everything works as expected but with more cpu consumption. Any help is appreciated.

[emilk]

You should be able to use ui.scroll_to_rect if you calculate the Rect of the (not visible) label

[bertiqwerty]

I managed to scroll to the label by calculating a Rect relative to the top of the scroll area. However, this only works if the scrollbar is at the top. If I scroll to another label it seems to add the current scroll bar position to the scrolling distance. I've seen that the Rect of labels are updated when the scrollbar position changes, but I have not found out how I can update the position of the rect that I have calculated myself.

[bertiqwerty]

I found a solution by subtracting ScrollAreaOutput.state.offset.y from the target Rect to be used with scroll_to_rect. Just for reference, I add the following snippet. I assume that idx is the index of the label I want to scroll to.

fn make_scroll_area(ui: &mut Ui, idx: usize, scroll_offset: f32) -> f32 {
    let text_style = egui::TextStyle::Body;
    let row_height = ui.text_style_height(&text_style);
    let spacing_y = ui.spacing().item_spacing.y;
    let area_offset = ui.cursor();
    let y = area_offset.top() + idx as f32 * (row_height + spacing_y);
    let target_rect = Rect {
        min: Pos2 {
            x: 0.0,
            y: y - scroll_offset,
        },
        max: Pos2 {
            x: 10.0,
            y: y + row_height - scroll_offset,
        },
    };
    ui.scroll_to_rect(target_rect, Some(Align::Center));
    let scroll = egui::ScrollArea::vertical()
        .show_rows(ui, row_height, n_rows, |ui, row_range| {
            for filtered_idx in row_range {
                // add labels
            }
        });
    scroll.state.offset.y
}

[paulrouget]

This helped. For others: the scroll_offset parameter is the returned value of the previous make_scroll_area call. And target_y should be y. Also, make sure each row has the same height.

[bertiqwerty]

Right! I fixed the y.

[philpax]

Just in case anyone's wondering how this works with virtual rendering / show_viewport, it's the same, but you don't need to preserve the offset across renders:

let area_offset_y = ui.cursor().top();
egui::ScrollArea::vertical()
    .auto_shrink(false)
    .show_viewport(ui, |ui, viewport| {
        if let Some(scroll_to_height) = scroll_to_height {
            let target_height = area_offset_y + scroll_to_height - viewport.min.y;
            ui.scroll_to_rect(
                egui::Rect {
                    min: egui::Pos2::new(viewport.min.x, target_height),
                    max: egui::Pos2::new(viewport.max.x, target_height + row_height),
                },
                Some(egui::Align::Center),
            );
        }
        // your rendering code here, including `ui.set_height`
    });