How to scroll page with 4 container-childs that cover over the page?

Description

I create a page with 4 container-childs that these childs cover over page’s area.
The page’s scrollbar appears automatically.

However the scrollbar is fixed,
I can’t scroll the page to view the lower page’s contents.
How to config the page for scrolling?

Thank you.

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

  • ESP32

What do you want to achieve?

As the Description.

What have you tried so far?

Code to reproduce


void create_page_with_conts() {
  lv_obj_t *page = lv_page_create(lv_scr_act(), NULL);

  static lv_style_t page_style_scrl;
  lv_style_copy(&page_style_scrl, lv_page_get_style(page, LV_PAGE_STYLE_SCRL));
  lv_page_set_style(page, LV_PAGE_STYLE_SCRL, &page_style_scrl);
  lv_page_set_style(page, LV_PAGE_STYLE_BG, &lv_style_transp_tight);

  page_style_scrl.glass = true;
  page_style_scrl.body.radius = 0;
  page_style_scrl.body.opa = 0;
  page_style_scrl.body.border.width = 0;
  page_style_scrl.body.padding.inner = 0;
  page_style_scrl.body.padding.bottom = 0;
  page_style_scrl.body.padding.left = 0;
  page_style_scrl.body.padding.right = 0;
  page_style_scrl.body.padding.top = 0;

  lv_obj_set_size(page, 220,220);
  lv_obj_align(page, NULL,  LV_ALIGN_CENTER,0,0);
  lv_obj_set_auto_realign(page, true);
  lv_page_set_scrl_layout(page, LV_LAYOUT_COL_M);
  
  /* 4 containers : page's child  */  
  lv_obj_t *cont[4];
  cont[0] = lv_cont_create(page, NULL);
  cont[1] = lv_cont_create(page, NULL);
  cont[2] = lv_cont_create(page, NULL);
  cont[3] = lv_cont_create(page, NULL);

  lv_obj_set_size(cont[0], 220, 80);
  lv_obj_set_size(cont[1], 220, 80);
  lv_obj_set_size(cont[2], 220, 80);
  lv_obj_set_size(cont[3], 220, 80);
}

Screenshot and/or video

You either need to disable the ability to click the containers (and their children) or you have to leave area to scroll the page where there are no containers.

2 Likes