单击时滚动到子元素水平（离子滚动）

Question

我尝试使用离子滚动创建可滚动的水平导航栏。

单击导航栏的元素时，离子滚动应水平滚动到该元素，以便完全进入视图。

这是导航栏。正如您所看到的，我点击了＆＃34;帮助＆＃34;部分，但它在屏幕外。

HTML如下（login.html）：

＆＃13;

＆＃13;

<ion-navbar class="h_nav_toolbar">
  <ion-scroll scrollX="true" id="h_nav_scroller">
    <div class="h_nav_container">
      <ul class="h_nav">
        <li id="login_tab" (click)="show_section('login')" [class.active]="current_section == 'login'">Login</li>
        <li id="register_tab" (click)="show_section('register')" [class.active]="current_section == 'register'">Register</li>
        <li id="forgot_password_tab" (click)="show_section('forgot_password')" [class.active]="current_section == 'forgot_password'">Forgot Password?</li>
        <li id="help_tab" (click)="show_section('help')" [class.active]="current_section == 'help'">Help</li>
      </ul>
    </div>
  </ion-scroll>
</ion-navbar>

＆＃13;

＆＃13;

＆＃13;

和Typescript（login.ts）

＆＃13;

＆＃13;

show_section(section_id){
  this.current_section = section_id;

  let section_element = document.getElementById(section_id + '_tab');
  section_element.scrollIntoView(true);

}

＆＃13;

＆＃13;

＆＃13;

不幸的是，我目前的尝试不起作用。 有什么想法吗？