Forum Academy Marketplace Showcase Pricing Features

Активация вертикального скролла в RG с кастомным CSS-стилем

Всем привет!

Делаю страничку с канбаном: RG со статусами, внутри нее RG с задачами (вертикальный скролл). Канбан находится между двумя floating group. Чтобы корректно настроить отображение по высоте использовал Hero size из плагина Toolkit.

Проблема в активации скролла: по умолчанию в столбец канбана подгружаются только первые две записи. Если сделать кнопку с действием “scroll to entry” внутри RG со статусами - то скролл активируется и подгружаются все записи. Вызвать этот скролл процессом в page load не получается, т.к. RG находится внутри другой RG.

Решил это с помощью CSS + JS: добавил кнопке CSS-стиль .superbutton1 и на page loaded добавил шаг с JS код:

const paragraphList = document.querySelectorAll(’.superbutton1’);
for (let i=0, length = paragraphList.length; i < length; i++) {
paragraphList[i].click()
}

Чтобы эта история срабатывала, пришлось перед шагом с JS повесить паузу 500ms.

Сейчас все работает, но страница стала грузится заметно медленнее, все дергается + есть риск, что при большом количестве записей в таблице задач время загрузки увеличится и паузы в 500ms не хватит.

Отсюда вопросы:

  1. Насколько мое решение корректно? есть ли более правильные способы активировать скролл?
  2. Можно ли запускать JS-код только тогда, когда прогрузятся задачи в столбце?

PS За цвета на скрине извиняюсь - они были сделаны для наглядного отображения областей при настройке высоты.