使离子文本区域在高度超过最大高度时可滚动

Question

我正在尝试在我的应用程序中实现聊天。

我编写了一个自动调整大小的离子文本区域，如下所示：视图

<ion-footer [keyboardAttach]="content">
  <ion-toolbar class="text-input">
    <ion-item no-lines>
      <ion-textarea autosize
        rows="1"
        placeholder="Votre message..."
        autocomplete="on"
        autocorrect="on"
        [(ngModel)]="message"
        >
      </ion-textarea>
      <button ion-button small icon-only round item-end color="secondary" (tap)="onSend()">
        <ion-icon name="send"></ion-icon>
      </button>
    </ion-item>
  </ion-toolbar>
</ion-footer>

.CSS

ion-footer {
    ion-toolbar.toolbar.toolbar-ios {
      &.toolbar:last-child {
        padding-bottom: 0px;
        height: auto;
      }
    }
    ion-item.item-textarea {
      background-color: transparent;
    }
    .text-input {
      height: auto;
      div.input-wrapper {
        background-color: #fff;
        border-radius: 20px;
        textarea.text-input {
          margin-left: 8px;
          max-height: 100px;
        }
      }
    }
  }

命令

import {ElementRef, HostListener, Directive, OnInit, ViewChild} from '@angular/core';
import {Content} from 'ionic-angular';
@Directive({
  selector: 'ion-textarea[autosize]'
})
export class AutosizeDirective implements OnInit {
  @HostListener('input', ['$event.target'])
  onInput(textArea:HTMLTextAreaElement):void {
    this.adjust();
  }
  constructor(public element:ElementRef) {
  }
  ngOnInit():void {
    setTimeout(() => this.adjust(), 0);
  }
  adjust():void {
    let textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];
    textArea.style.overflow = 'hidden';
    textArea.style.height = 'auto';
    textArea.style.height = textArea.scrollHeight + "px";
  }
}

一切都很好，但滚动。

当我超过 100px 最大高度时，我无法在离子文本区域中滚动......因此，如果我想更正文本的隐藏部分，那是不可能的。此外，当我尝试滚动时，它实际上会滚动聊天（离子内容）......

知道我该如何解决这个问题吗？

Answer 1

我是这样解决的：.南海

.text-input {
      height: auto;
      div.input-wrapper {
        background-color: #fff;
        border-radius: 20px;
        textarea.text-input {
          margin-left: 8px;
          //overflow-y: auto;
          //max-height: 100px;
        }
      }
    }

并使用包含调整函数的自定义自动调整指令：

adjust():void {
    let textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];
    textArea.style.height = 'auto';
    if (textArea.scrollHeight < 100) {
      textArea.style.height = textArea.scrollHeight + "px";
      textArea.style.overflowY = 'hidden';
    } else {
      textArea.style.height = "100px";
      textArea.style.overflowY = 'auto';
    }
  }

希望这会帮助其他人。