离子3-水平滚动条不起作用

Question

我想使所有项目保持水平滚动视图。我做了必要的更改，但无法进行水平滚动。

下面是我的代码。任何帮助将是可观的。

1。 image-home.html

<ion-row id="top-toolbar">
    <ion-col>
            <ion-buttons>
                <button *ngFor="let colour of availableColours" icon-only ion-button (click)="changeColour(colour)">
                    <ion-icon [style.color]="colour" name="brush"></ion-icon>
                </button>
            </ion-buttons>
    </ion-col>
  </ion-row>

2。 image-home.scss

#top-toolbar{
        position: absolute;
        bottom: 18%;
        height: 70px;
    }

ion-buttons{
       white-space: nowrap;
       display: inline-flex;
       width: auto;
       min-width: 100px;
       overflow-x: scroll;
       min-height: 100%;
}

3。 image-home.component.ts

constructor(public navCtrl: NavController, public navParams: NavParams, public renderer: Renderer2, 
    private keyboard: Keyboard, public platform: Platform) {
    this.selectedImage = this.navParams.get('id');
    this.availableColours = [
      '#1abc9c',
      '#3498db',
      '#9b59b6',
      '#e67e22',
      '#e74c3c',
      '#ffbf00',
      '#bfff00',
      '#00ffff',
      '#0080ff',
      '#bf00ff',
      '#ff00bf',
      '#ac5353',
      '#D8BFD8',
      '#A0522D'
  ];

  }

4。当前实施-

Answer 1

您可以按以下方式使用。

<ion-toolbar class="segment">
    <button *ngFor="let colour of availableColours" icon-only ion-button (click)="changeColour(colour)">
    <ion-icon [style.color]="colour" name="brush"></ion-icon>
    </button>
 </ion-toolbar>

在CSS中

ion-segment {
        display: block;
        white-space: nowrap;
        font-size: 0;
        overflow: auto;

        &::-webkit-scrollbar {
            width: 0;
            height: 0;
            display: none;
        }
        &::-moz-user-scrollbar{
            width: 0;
            height: 0;
            display: none;
        }
  }

让我知道它将起作用