如何检测溢出

Question

我正在尝试检测溢出。

我正在尝试将用户图片列在一行中，如果它溢出，具体取决于设备屏幕尺寸/屏幕方向的变化。

我尝试使用媒体查询这样做，但没有运气。我正在使用Ionic 3

html的：

<ion-row style="padding: 7px;" nowrap>
  <ion-row style="overflow: hidden; height: 55px;">
       <ion-col col-auto *ngFor="let image of images">
            <img src="assets/images/image.png" />
        </ion-col>
  </ion-row>

  <ion-col *ngIf="showButton" col-auto align-self-center>
     <img src="assets/images/more3.svg">
  </ion-col>
</ion-row>

.ts：

showButton = true;

/////
constructor(public navCtrl: NavController,
            public modalCtrl: ModalController,
            private postService: PostService,
            private app: App,
            private el: ElementRef){

  this.images = new Array(10);
}

我想在行不再溢出时隐藏按钮more并且项目适合屏幕并显示何时不显示。

任何建议，thanx

Answer 1

好的，我找到了解决办法，但这不是最好的解决方案

html的：

///
<ion-row id="innerRow" style="overflow: hidden; height: 55px;">   //added id
   <ion-col col-auto *ngFor="let image of images">
        <img src="assets/images/image.png" />
    </ion-col>
</ion-row> 
//// 

.ts：

showButton = true;

 /////
constructor(public navCtrl: NavController,
        public modalCtrl: ModalController,
        private postService: PostService,
        private app: App,
        private ngZone: NgZone){

   this.images = new Array(10);

   window.onresize = (e) => {                      // detect window resize
    this.ngZone.run(() => {
       let row = document.getElementById('innerRow');
          this.showButton = false;                 // reset
             if (this.isOverFlowed(row)){
                this.showButton = true;
             }
         });
     };
   }
} 

 ngAfterViewInit(){
  let row = document.getElementById('innerRow');
    if (this.isOverFlowed(row)){
        this.showButton = true;
    }
  }

  isOverFlowed(element){
    return element.scrollHeight > element.clientHeight ||element.scrollWidth > element.clientWidth;
  }

我对改进此代码的任何建议持开放态度，而不是