如何自动滚动页脚以将特定突出显示的div聚焦在ionic3中

Question

我正在尝试将我的ionic3页脚自动滚动到聚焦的div，例如，iam在我的主页中有9个菜单，而那些9个菜单图标在我的页脚中显示，如果我点击页脚中的图标则会转到该特定页面页面，进入该页面后，我的页脚必须滚动到该特定的页面图标，但我没有得到它，请找出这个问题

下面是我当前的行为形象

预期的行为

就像我去那个航班页面的最后一张图片一样，我的页脚必须滚动到那个图标，但现在它没有发生

这是我的代码

    <ion-footer>
    <div style="display:inline-flex;border-top: 1px solid #b3b3b3;overflow-x:auto;" class="scroll-content" #footerCont (ionScroll)="scrollHandler($event)">
        <div class="col" [navPush]="homePage" [ngStyle]="pageName == 'homePage' && {'color': themePrimaryColor}">
            <ion-icon name="footer-home"></ion-icon>
            <p>Home</p>
        </div>
        <div class="col" [navPush]="itineraryPage" [ngStyle]="pageName == 'itineraryPage' && {'color': themePrimaryColor}">
            <ion-icon name="footer-itinerary"></ion-icon>
            <p>itinerary</p>
        </div>
        <div class="col " [navPush]="chatPage" [ngStyle]="pageName == 'chatPage' && {'color': themePrimaryColor}">
            <ion-icon  name="footer-chat-bubble-two"></ion-icon>
            <p>chat</p>
        </div>
        <div class="col"  [ngStyle]="pageName == 'aboutPage' && {'color': themePrimaryColor}">
            <ion-icon  name="footer-about"></ion-icon>
            <p>About</p>
        </div>
       ::
       :://all footer icons
       ::
        <div class="col"  [ngStyle]="pageName == 'flghtsPage' && {'color': themePrimaryColor}">
            <ion-icon  name="footer-flights"></ion-icon>
            <p>flights</p>
        </div>
  </div>
</ion-footer>