Reset (or set 0) the horizontal scroll on scrollable ion-toolbar

Ionic Framework ionic-v3
1

I have a horizontally scrollable ion-toolbar:

image

After setting one of these filters, an extra option becomes available which enables removal of the selection.

image

But, when the toolbar is not at horizontal scroll position 0, and a filter is selected, the toolbars horizontal scroll value does not reset. This results in the following:
image

I have been searching for the correct property to set for some time now, but i am unable to get it functional.

The css making it scrollable:

ion-toolbar.scrollable-segments {
  display: block;
  overflow: scroll;
  white-space: nowrap;
  margin: 0px 0px 0px 0px;
  min-height: 0px;
}

ion-toolbar.scrollable-segments .toolbar-background {
  background: transparent;
}

ion-toolbar.scrollable-segments::-webkit-scrollbar {
  height: 0;
  width: 0;
  display: none;
}

ion-toolbar.scrollable-segments ion-button {
  display: inline-block;
  width: auto;
}

HTML

<ion-toolbar no-border class="scrollable-segments" id="filterbar">
        <button color="primary" ion-button round small *ngIf="filtered" (click)="removeFilters()"> <p>wissen</p></button>
        <button color="secondary" *ngFor="let filter of filters" ion-button round small [outline]="!filter.active" (click)="goToFilter(filter)">
          <p>{{filter.name}}</p>
          <p *ngIf="filter.active && (filter.name !== 'Land' || !singleCountry) " >({{filter.amount}})</p>
          <span *ngIf="singleCountry && filter.name === 'Land'" [class]="selectedCountryIcon()"></span>
        </button>
    </ion-toolbar>

I would like so know how to programmatically reset the horizontal scroll, or set it to 0.

Thanks

2

Still havent found a solution, anyone who has an idea?

3

For everyone having the same issue, i’ve found a workaround:

  1. In the HTML, copy your element (in my case, the toolbar) and place it under the current one
  2. Link both elements to a boolean in your .ts file, for example called “switch”. For 1 element *ngIf="switch", for the other *ngIf="!switch"
  3. On ionViewWillEnter, activate the switch --> this.switch = !this.switch;
  4. The element will be reloaded when the view will be entered, resulting in a resetted scroll.

Its not pretty, but it works.

cheers