Я создаю ионное приложение, в котором я добавил панель инструментов внутри заголовка, и у нее есть 5 кнопок для навигации. но когда я пробую код на браузерных устройствах, горизонтальная прокрутка отлично работает для панели инструментов, но на самом устройстве она не будет работать должным образом. иногда он прокручивался, а иногда нет. Ниже приведен код для того же самого.
<ion-header>
<ion-navbar color="light">
<ion-title>Home</ion-title>
<ion-buttons end>
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
<button ion-button icon-only>
<ion-icon name="cart"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-toolbar color="light">
<ion-buttons>
<button ion-button clear>{{'All'|translate}}</button>
</ion-buttons>
<ion-buttons *ngFor="let facet of parentCategories">
<button ion-button [ngClass]=" {'active' : selectedFacet == facet}">{{facet}}
</button>
<button ion-button icon-only clear class="accordion" (tap)="getSubFacets(facet);accordion(event)" *ngIf="selectedFacet == facet"><ion-icon name="ios-arrow-down"></ion-icon></button>
</ion-buttons>
<div id="sub-category" class="sub-category">
<ion-buttons *ngFor="let subFacet of childCategories">
<button ion-button [ngClass]=" {'active' : selectedSubFacet == subFacet}" (tap)="getFilteredProducts('categoryFacet',subFacetMap.get(subFacet), selectedFacet, subFacet)">
{{subFacet}}</button>
</ion-buttons>
</div>
</ion-toolbar>
</ion-header>
CSS:
.toolbar-content {
overflow-x: auto;
white-space: nowrap;
overflow-y: hidden;
width: 100%;
height: 56px;
}