Restrict the scrolling range of the list

[andy-sky]

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?

When the page scrolls to the top or bottom, it will stop after continuing to scroll a certain distance to prevent the content from scrolling out of the screen.

What have you tried so far?

Analyze the implementation of the elastic_diff and scroll_limit_difffunction.

Code to reproduce

#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, LV_HOR_RES_MAX);
    lv_obj_set_scroll_snap_y(m_menu_container, LV_SCROLL_SNAP_CENTER);
    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, 0);

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

        /*Add items to the column*/
        obj = lv_obj_create(m_menu_container);
        lv_obj_set_size(obj, LV_PCT(100), 100);
        lv_obj_set_style_bg_opa(obj, 255, LV_PART_MAIN);
        lv_obj_set_style_bg_color(obj, lv_color_hex(0x3FBFF5), LV_PART_MAIN);

        label = lv_label_create(obj);
        lv_label_set_text_fmt(label, "Item: %" LV_PRIu32, i);
        lv_obj_set_style_bg_opa(label, 255, LV_PART_MAIN);
        lv_obj_set_style_bg_color(label, lv_color_hex(0x3FF07F), LV_PART_MAIN);
        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);

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

Screenshot and/or video

scrolling up

Stop scrolling when reaching approximately one-third down the screen to prevent scrolling off the screen.

[Stipa889]

Do you want to do something like this?

The code for that is:

    lv_obj_t * cont_col = lv_obj_create(lv_scr_act());
    lv_obj_set_size(cont_col, 200, 150);
    lv_obj_set_flex_flow(cont_col, LV_FLEX_FLOW_COLUMN);
    lv_obj_align(cont_col, LV_ALIGN_CENTER, 0, 0);

    uint32_t i;
    for(i = 0; i < 10; i++)
    {
        lv_obj_t * obj;
        lv_obj_t * label;
        obj = lv_btn_create(cont_col);
        lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);

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

[kisvegabor]

I think you just need to call lv_obj_clear_flag(obj, LV_OBJ_FLAG_SCROLL_ELASTIC);

[andy-sky]

If I clear the LV_OBJ_FLAG_SCROLL_ELASTIC flag, the scroll will not exceed the start or end boundaries of the content. As shown in the figure below, it is no longer possible to scroll up at this point.

But I hope it can continue to scroll for a certain distance (ELASTIC_STOP_DISTANCE), the length of which can be set, and then stop after exceeding this distance, and then bounce back after release.
such as：

#define ELASTIC_STOP_DISTANCE 100

Eventually, the scroll stops at the position shown in the figure below.

[andy-sky]

If modifications are made at the lower level, what are some good methods?

[lvglnilesh]

Hi ! I am trying similar to serial monitor printing metadata as internet radio Or SDplayer , as metadata continuously giving information to be printed on scrolling screen , and once previous lines to be deleted . will some one guide as I am learning phase

[lizhaoming634]

maybe you can use lv_obj_set_style_pad_bottom(cont_col, 100, LV_PART_MAIN);

[andy-sky]

I’ve tried it, but it still slides out of the screen, and the restriction doesn’t take effect.

void test1(lv_obj_t *parent)
{
    lv_obj_t* cont_col = lv_obj_create(parent);
    lv_obj_set_size(cont_col, 300, 200);
    lv_obj_set_flex_flow(cont_col, LV_FLEX_FLOW_COLUMN);
    lv_obj_align(cont_col, LV_ALIGN_CENTER, 0, 0);
    lv_obj_set_style_pad_bottom(cont_col, 100, LV_PART_MAIN);

    uint32_t i;
    for (i = 0; i < 10; i++)
    {
        lv_obj_t* obj;
        lv_obj_t* label;
        obj = lv_btn_create(cont_col);
        lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
        LV_LOG_WARN("height:%3d, width:%3d",lv_obj_get_height(obj), lv_obj_get_width(obj));

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

[lizhaoming634]

maybe you can use lv_obj_get_scroll_y() and lv_obj_scroll_to_y();?

static void scroll_limit_event_cb(lv_event_t* e)
{
lv_obj_t* cont_col = lv_event_get_target_obj(e);
if (lv_obj_get_scroll_y(cont_col) > 240)
{
lv_obj_scroll_to_y(cont_col, 240, LV_ANIM_ON);
}
}

lv_obj_add_event_cb(cont_col, scroll_limit_event_cb, LV_EVENT_SCROLL, NULL);

[andy-sky]

I tested your example, and when scrolling up to a certain position, the screen will be released automatically instead of stopping.

[kisvegabor]

Using padding_bottom should work. What is the exact problem? Can you send a video/screenshot?

[andy-sky]

Hi kisvegabor,
The current problem is that it will keep scrolling forward if not released. I hope it stops when scrolling to a fixed position and waits to be released actively.
The desired effect is as follows:
VID_20250109_152945.zip (1006.1 KB)

[kisvegabor]

Ah I see! In this case you should use both lv_obj_clear_flag(obj, LV_OBJ_FLAG_SCROLL_ELASTIC); and pad_bottom.

[andy-sky]

@kisvegabor

lv_obj_clear_flag(obj, LV_OBJ_FLAG_SCROLL_ELASTIC);

I tested it and it indeed stops, but there’s a problem: there’s no bounce back effect. How can I maintain both the bounce back effect and the range limitation?