scrollLeft tabbar

1

Hello,

I created a scrollable tabbar/toolbar also containing another tabbar, for each tabbar I assigned an index with a data-attribute in order to be able to recall a specific tabbar when loading the page based on a previously saved value, everything works fine however if the tabbar to be selected is for example the last one it will be selected but the scrollbar will not centralize the view on the selected element.

Code example html:

<div class="toolbar tabbar toolbar-bottom tabbar-scrollable">
    <div class="toolbar-inner tabsIndex">
        <a href="#tab-test1" data-index="1" class="tab-link">Test 1</a>
        <a href="#tab-test2" data-index="2" class="tab-link">Test 2</a>
        ...       
        <a href="#tab-test12" data-index="12" class="tab-link">Test 12</a>                                                                                                                            
    </div>
</div>                
<div class="tabs">
    <div id="tab-test1" class="tab">                                                                                                                       
        <div class="toolbar tabbar toolbar-bottom">
            <div class="toolbar-inner tabsIndex">
                <a href="#tab-1-test1" data-subindex="1" data-impianto="1" class="tab-link">tab1</a>
                <a href="#tab-2-test1" data-subindex="2" data-impianto="1" class="tab-link">tab2</a>
            </div>
        </div>
        <div class="tabs-animated-wrap">
            <div class="tabs">
                <div id="tab-1-test1" class="tab">
                    <!-- content -->
                </div>
                <div id="tab-2-test1" class="tab">
                    <!-- content -->
                </div>
            </div>
        </div>
    </div>
    <div id="tab-test2" class="tab">                                                                                                                       
        <div class="toolbar tabbar toolbar-bottom">
            <div class="toolbar-inner tabsIndex">
                <a href="#tab-1-test2" data-subindex="1" data-impianto="1" class="tab-link">tab1</a>
                <a href="#tab-2-test2" data-subindex="2" data-impianto="1" class="tab-link">tab2</a>
            </div>
        </div>
        <div class="tabs-animated-wrap">
            <div class="tabs">
                <div id="tab-1-test2" class="tab">
                    <!-- content -->
                </div>
                <div id="tab-2-test2" class="tab">
                    <!-- content -->
                </div>
            </div>
        </div>
    </div>
    <!-- others tabs -->
</div>

Script javascript for select tab on loading:

const arrayIndexFromDB = [12,1]; //last tab - first sub tab
const arrToolbar = ['test1', 'test2', ... 'test12'];
app.tab.show(output.querySelector(`#tab-${arrToolbar [arrayIndexFromDB[0]]}`));
app.tab.show(output.querySelector(`#tab-${arrayIndexFromDB[1]}-${arrToolbar [arrayIndexFromDB[0]]}`));