[Solved] How to center horizontal tabbar-scrollable tab-link

Hello everyone,
Would someone help me on how do I start horizontal tabbar-scrollable with a specific tab-link centered or at least visible?

I’m using vue page components, md tabbar-scrollable, however the amount of items exceeds screen view and I would like to start application displaying a specific item - for example current day of.

Here is code snippet:

    <f7-toolbar id="tabbarEl"  :bottom-md="isBottom"  tabbar  scrollable>
      <f7-segmented id="tabbarSegmentedEl">
        <f7-button  v-for="monthDayTabIndex in monthDaysTabIndex"  :key="monthDayTabIndex.dateKey"
          id="tabLinkEl"
          :tab-link="'#tab'+monthDayTabIndex.dateKey"
          :class="(monthDayTabIndex.dateKey == currentDateKey) ? 'tab-link-active' : ''"
          :text="monthDayTabIndex.day+' '+monthDayTabIndex.dayNameShort"
          fill
        />
        <span style="width: 70px"/>
      </f7-segmented>
    </f7-toolbar>

Currently starts like this:
Capture1

Should start like this:
Capture2

this.$$(’#tabbarEl .toolbar-inner’).scrollLeft(xxx)

Thank you very much, Echo_Chen.
It worked perfectly.