Display scrollbar even with "SCROLLABLE" flag off

How-to
1

Using LVGL V9.

I am trying to make it so that I can navigate a table only with buttons on the screen itself. This works well but when I disable the SCROLLABLE flag on the table object, the scrollbar dissapears. I cannot remove the CLICKABLE flag from the table because I want to be able to click on some of the cells.

Here is my code:

lv_obj_t* btnUp = lv_button_create(topBar);
lv_obj_add_style(btnUp, &Style_ExitBtn, LV_PART_MAIN);
lv_obj_set_style_text_color(btnUp, lv_color_hex(UI_COL_WHITE), LV_PART_MAIN);
lv_obj_set_size(btnUp, TOP_BAR_HEIGHT, TOP_BAR_HEIGHT);
lv_obj_align_to(btnUp, labTitle, LV_ALIGN_OUT_RIGHT_MID, 20, 0);
lv_obj_t* labBtnUp = lv_label_create(btnUp);
lv_label_set_text_static(labBtnUp, LV_SYMBOL_UP);
lv_obj_center(labBtnUp);

lv_obj_t* btnDown = lv_button_create(topBar);
lv_obj_add_style(btnDown, &Style_ExitBtn, LV_PART_MAIN);
lv_obj_set_style_text_color(btnDown, lv_color_hex(UI_COL_WHITE), LV_PART_MAIN);
lv_obj_set_size(btnDown, TOP_BAR_HEIGHT, TOP_BAR_HEIGHT);
lv_obj_align_to(btnDown, btnUp, LV_ALIGN_OUT_RIGHT_MID, 0, 0);
lv_obj_t* labBtnDown = lv_label_create(btnDown);
lv_label_set_text_static(labBtnDown, LV_SYMBOL_DOWN);
lv_obj_center(labBtnDown);

/* This assigns these buttons to my table object, clicking the buttons will trigger event callbacks
   that call ``lv_scroll_by()``. Works with the OBJ_FLAG_SCROLLABLE flag removed. */
ui_assignBtnScroll(btnUp, btnDown, NULL, NULL,
        Table, DISP_VER_RES - TOP_BAR_HEIGHT - HEADER_HEIGHT);

   
lv_obj_remove_flag(Table, LV_OBJ_FLAG_SCROLLABLE);
lv_obj_set_scrollbar_mode(Table, LV_SCROLLBAR_MODE_ON);

EDIT:
I see that removing the SCROLLABLE flag invalides the scrollbar area. Is it perhaps possible to “revalidate” the scrollbar area after the fact?

2

You can use a style to edit the scroll object:

static lv_style_t style;
lv_style_init(&style);
lv_style_set_radius(&style, 2);
lv_style_set_bg_opa(&style, LV_OPA_70);
lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_border_color(&style, lv_palette_darken(LV_PALETTE_BLUE, 3));
lv_style_set_border_width(&style, 2);
lv_obj_add_style(Table, &style, LV_PART_SCROLLBAR);

Solution: Scroll — LVGL documentation

3

Thanks for the response.

Sadly this does not fix my issue… the scrollbar is styled properly (blue and less round) but disabling the scrollable flag still just removes the entire scrollbar.

4

I don’t understand, what is your goal? What you want to achieve?

5

Hello,

I have a table with a list of values in it, to edit these values they need to be pressed, so the table needs to be clickable.

However we use a resistive touch touchscreen, so scrolling by swiping is not really intuitive, hence why I have added buttons to scroll the table. I would like to show the scrollbar so that the user can see how far he has scrolled, but I do not want the user to be able to scroll by swiping. Disabling the SCROLLABLE flag still allows my table to be scrolled with the buttons and no longer by swiping… but then my scrollbar dissapears.

6

The solution is here: How to disable drag scroll but still show scrollbar? · Issue #4658 · lvgl/lvgl · GitHub