Scrolling cannot be propagated to the parent object

andy-sky · December 1, 2024, 5:29pm

Important: unclear posts may not receive useful answers.

Before posting

Get familiar with Markdown to format and structure your post

Be sure to update lvgl from the latest version from the master branch.

Be sure you have checked the FAQ and read the relevant part of the documentation.

If applicable use the Simulator to eliminate hardware related issues.

Delete this section if you read and applied the mentioned points.

Description

What MCU/Processor/Board and compiler are you using?

BES2700BP

What LVGL version are you using?

v8.3

What do you want to achieve?

Scroll propagation in multi-layer Flex layouts to parent objects.

What have you tried so far?

Analyze the implementation of the lv_indev_find_scroll_obj function.

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

lv_obj_t * lv_indev_find_scroll_obj(lv_indev_t * indev)
{
    ...
    /*Vertical scroll*/
        snap_cnt = 0;
        int32_t st = 0;
        int32_t sb = 0;
        lv_scroll_snap_t snap_y = lv_obj_get_scroll_snap_y(obj_act);
        if(snap_y != LV_SCROLL_SNAP_NONE) {
            uint32_t child_cnt = lv_obj_get_child_count(obj_act);
            uint32_t i;
            for(i = 0; i < child_cnt; i++) {
                if(lv_obj_has_flag(lv_obj_get_child(obj_act, i), LV_OBJ_FLAG_SNAPPABLE)) {
                    snap_cnt++;
                    if(snap_cnt == 2) {
                        st = 1; /*Assume scrolling*/
                        sb = 1;
                        break;
                    }
                }
            }
        }
        if(snap_y == LV_SCROLL_SNAP_NONE || snap_cnt < 2) {
            st = lv_obj_get_scroll_top(obj_act);
            sb = lv_obj_get_scroll_bottom(obj_act);
        }


        /*If this object is scrollable into the current scroll direction then save it as a candidate.
         *It's important only to be scrollable on the current axis (hor/ver) because if the scroll
         *is propagated to this object it can show at least elastic scroll effect.
         *But if not hor/ver scrollable do not scroll it at all (so it's not a good candidate)*/
        if((st > 0 || sb > 0)  &&
           ((up_en    && obj_scroll_sum.y >=   scroll_limit) ||
            (down_en  && obj_scroll_sum.y <= - scroll_limit))) {
            obj_candidate = obj_act;
            dir_candidate = LV_DIR_VER;
        }

        ...

        if(st <= 0) up_en = false;
        if(sb <= 0) down_en = false;
        if(sl <= 0) left_en = false;
        if(sr <= 0) right_en = false;

        ...

        /*Try the parent*/
        obj_act = lv_obj_get_parent(obj_act);
    ...
}

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

andy-sky · December 1, 2024, 5:44pm

In a multi-layer Flex layout, checking whether specific child objects use the LV_OBJ_FLAG_SNAPPABLE flag, could this condition potentially prevent the scroll chain from ever being passed to the parent object?

for(i = 0; i < child_cnt; i++) {
    if(lv_obj_has_flag(lv_obj_get_child(obj_act, i), LV_OBJ_FLAG_SNAPPABLE)) {
        snap_cnt++;
        if(snap_cnt == 2) {
            st = 1; /*Assume scrolling*/
            sb = 1;
            break;
        }
    }
}

The values of st and sb will always be 1, and will not become negative, even when scrolling beyond the top or bottom with a bounce feature.Please help confirm, thank you.

andy-sky · December 1, 2024, 5:57pm

Refer the commit fix(indev): fix elastic scrolling with snapping (#6230) · lvgl/lvgl@63edb43 · GitHub

kisvegabor · December 2, 2024, 6:54am

Hi,

Please send a code snippet to reproduce the issue.

andy-sky · December 2, 2024, 12:11pm

Hi, @kisvegabor

The code of v8.3 is as follows：

#define LV_HOR_RES_MAX 466
#define LV_VER_RES_MAX 466

void CreateControlMenu(lv_obj_t *parent)
{
    auto m_menu_container = lv_obj_create(parent);

    lv_obj_remove_style_all(m_menu_container);
    lv_obj_set_size(m_menu_container, LV_HOR_RES_MAX, 466 / 2 + 102 / 2);
    lv_obj_set_scroll_snap_y(m_menu_container, LV_SCROLL_SNAP_START);
    lv_obj_set_flex_flow(m_menu_container, LV_FLEX_FLOW_COLUMN);
    lv_obj_align(m_menu_container, LV_ALIGN_TOP_MID, 0, 12);
    lv_obj_set_style_bg_opa(m_menu_container, LV_OPA_0, LV_PART_MAIN);
    lv_obj_set_scroll_dir(m_menu_container, LV_DIR_VER);
    lv_obj_align(m_menu_container, LV_ALIGN_TOP_MID, 0, 450);

    for (int8_t i = 0; i < 10; ++i)
    {
        lv_obj_t *obj;
        lv_obj_t *label;

        /*Add items to the column*/
        obj = lv_btn_create(m_menu_container);
        lv_obj_set_size(obj, LV_PCT(100), 100);

        label = lv_label_create(obj);
        lv_label_set_text_fmt(label, "Item: %" LV_PRIu32, i);
        lv_obj_center(label);
    }
}

void CreateControlView(lv_obj_t *parent)
{
    auto m_control_container = lv_obj_create(parent);
    lv_obj_set_size(m_control_container, LV_HOR_RES_MAX, LV_VER_RES_MAX);
    lv_obj_align(m_control_container, LV_ALIGN_TOP_MID, 0, 0);
    lv_obj_set_style_bg_opa(m_control_container, 0, 0);
    lv_obj_set_style_bg_opa(m_control_container, LV_OPA_0, LV_PART_SCROLLBAR | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(m_control_container, LV_OPA_0, LV_PART_SCROLLBAR | LV_STATE_SCROLLED);
    lv_obj_clear_flag(m_control_container, LV_OBJ_FLAG_SCROLL_MOMENTUM);
    lv_obj_clear_flag(m_control_container, LV_OBJ_FLAG_SCROLL_ELASTIC);

    auto place_holder = lv_obj_create(m_control_container);
    lv_obj_set_size(place_holder, LV_HOR_RES_MAX, 438);
    lv_obj_set_style_bg_opa(place_holder, 30, 0);
    lv_obj_set_style_bg_color(place_holder, lv_color_hex(0x3FF07F), 0);
    lv_obj_align(place_holder, LV_ALIGN_TOP_MID, 0, 0);
    lv_obj_set_y(place_holder, 0);
    lv_obj_clear_flag(place_holder, LV_OBJ_FLAG_CLICKABLE);


    CreateControlMenu(m_control_container);
    lv_obj_scroll_to_y(m_control_container, 0, LV_ANIM_OFF);
}

The code of v9.2 is as follows：

#define LV_HOR_RES_MAX 466
#define LV_VER_RES_MAX 466

void CreateControlMenu(lv_obj_t *parent)
{
    auto m_menu_container = lv_obj_create(parent);

    lv_obj_remove_style_all(m_menu_container);
    lv_obj_set_size(m_menu_container, LV_HOR_RES_MAX, 466 / 2 + 102 / 2);
    lv_obj_set_scroll_snap_y(m_menu_container, LV_SCROLL_SNAP_START);
    lv_obj_set_flex_flow(m_menu_container, LV_FLEX_FLOW_COLUMN);
    lv_obj_align(m_menu_container, LV_ALIGN_TOP_MID, 0, 12);
    lv_obj_set_style_bg_opa(m_menu_container, LV_OPA_0, LV_PART_MAIN);
    lv_obj_set_style_rotary_sensitivity(m_menu_container, 64, 0);
    lv_obj_set_scroll_dir(m_menu_container, LV_DIR_VER);
    lv_obj_align(m_menu_container, LV_ALIGN_TOP_MID, 0, 450);

    for (int8_t i = 0; i < 10; ++i)
    {
        lv_obj_t *obj;
        lv_obj_t *label;

        /*Add items to the column*/
        obj = lv_button_create(m_menu_container);
        lv_obj_set_size(obj, LV_PCT(100), 100);

        label = lv_label_create(obj);
        lv_label_set_text_fmt(label, "Item: %" LV_PRIu32, i);
        lv_obj_center(label);
    }
}

void CreateControlView(lv_obj_t *parent)
{
    auto m_control_container = lv_obj_create(parent);
    lv_obj_set_size(m_control_container, LV_HOR_RES_MAX, LV_VER_RES_MAX);
    lv_obj_align(m_control_container, LV_ALIGN_TOP_MID, 0, 0);
    lv_obj_set_style_bg_opa(m_control_container, 0, 0);
    lv_obj_set_style_bg_opa(m_control_container, LV_OPA_0, LV_PART_SCROLLBAR | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(m_control_container, LV_OPA_0, LV_PART_SCROLLBAR | LV_STATE_SCROLLED);
    lv_obj_clear_flag(m_control_container, LV_OBJ_FLAG_SCROLL_MOMENTUM);
    lv_obj_clear_flag(m_control_container, LV_OBJ_FLAG_SCROLL_ELASTIC);


    auto place_holder = lv_obj_create(m_control_container);
    lv_obj_set_size(place_holder, LV_HOR_RES_MAX, 438);
    lv_obj_set_style_bg_opa(place_holder, 30, 0);
    lv_obj_set_style_bg_color(place_holder, lv_color_hex(0x3FF07F), 0);
    lv_obj_align(place_holder, LV_ALIGN_TOP_MID, 0, 0);
    lv_obj_set_y(place_holder, 0);
    lv_obj_clear_flag(place_holder, LV_OBJ_FLAG_CLICKABLE);

    CreateControlMenu(m_control_container);
    lv_obj_scroll_to_y(m_control_container, 0, LV_ANIM_OFF);
}

andy-sky · December 3, 2024, 6:59am

Comparison Test:

In the release/v8.3 demo test, the last two items at the end cannot be scrolled up and are stuck.
Testing the release/v9.2 demo, the top-level ITEMS can be scrolled, but when scrolled to the top and then scrolled down further, the scrolling cannot be passed to the next layer.

kisvegabor · December 20, 2024, 9:07am

I’m sorry that I kept you waiting so long. I just had time to take a deeper look today and sent a PR as well:

github.com/lvgl/lvgl

fix(scroll): handle scroll chain with snapping too

lvgl:master ← kisvegabor:fix/snap-scroll-chain

opened 09:06AM - 20 Dec 24 UTC

kisvegabor

+110 -93

fixes https://forum.lvgl.io/t/scrolling-cannot-be-propagated-to-the-parent-objec…t/19101 Without this PR the items of this list didn't propagate the scroll to the parent. ```c lv_obj_set_flex_flow(parent, LV_FLEX_FLOW_COLUMN); lv_obj_t * cont1 = lv_obj_create(parent); lv_obj_set_size(cont1, lv_pct(100), lv_pct(50)); lv_obj_set_style_bg_color(cont1, lv_palette_main(LV_PALETTE_RED), 0); lv_obj_t * cont2 = lv_obj_create(parent); lv_obj_set_size(cont2, lv_pct(100), lv_pct(100)); lv_obj_set_style_bg_color(cont2, lv_palette_main(LV_PALETTE_GREEN), 0); lv_obj_set_scroll_snap_y(cont2, LV_SCROLL_SNAP_CENTER); lv_obj_set_flex_flow(cont2, LV_FLEX_FLOW_COLUMN); lv_obj_t * cont3 = lv_obj_create(parent); lv_obj_set_size(cont3, lv_pct(100), lv_pct(50)); lv_obj_set_style_bg_color(cont3, lv_palette_main(LV_PALETTE_BLUE), 0); /*Add items to middle cont (cont2)*/ uint32_t i; for(i = 0; i < 10; i++) { lv_obj_t *obj = lv_button_create(cont2); lv_obj_set_size(obj, LV_PCT(100), 100); lv_obj_t * label = lv_label_create(obj); lv_label_set_text_fmt(label, "Item: %" LV_PRIu32, i); lv_obj_center(label); } ``` ### Notes - Update the [Documentation](https://github.com/lvgl/lvgl/tree/master/docs) if needed. - Add [Examples](https://github.com/lvgl/lvgl/tree/master/examples) if relevant. - Add [Tests](https://github.com/lvgl/lvgl/blob/master/tests/README.md) if applicable. - If you added new options to `lv_conf_template.h` run [lv_conf_internal_gen.py](https://github.com/lvgl/lvgl/blob/master/scripts/lv_conf_internal_gen.py) and update [Kconfig](https://github.com/lvgl/lvgl/blob/master/Kconfig). - Run `scripts/code-format.py` (`astyle v3.4.12` needs to installed by running `cd scripts; ./install_astyle.sh`) and follow the [Code Conventions](https://docs.lvgl.io/master/CODING_STYLE.html). - Mark the Pull request as [Draft](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-stage-of-a-pull-request) while you are working on the first version, and mark is as _Ready_ when it's ready for review. - When changes were requested, [re-request review](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/requesting-a-pull-request-review) to notify the maintainers. - Help us to review this Pull Request! Anyone can [approve or request changes](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/approving-a-pull-request-with-required-reviews).

Please test it and let me know how it works.

andy-sky · December 26, 2024, 10:02am

HI kisvegabor,
I have tested it, and the current performance is correct, the Flex switch is quite accurate, thank you very much.

kisvegabor · January 1, 2025, 1:30pm

Awesome, thank you for the feedback!