How to catch the scroll event of the textarea field?

Question

css

Can you please tell me how to catch the scroll event of the textarea field?
Suppose there is a textarea field, it has overflow: auto, at some point in time (when the textarea field is filled) a scroll appears, when it appears, I need the desired method to work.
Example (fictitious), textarea scroll appeared, padding property was added to the textarea tag: 10px;

Answer 1

@Directive({
  selector: 'textarea[appText]'
})
export class TextDirective {
  @Output() public hasScrollBar = new EventEmitter<boolean>();

  constructor(private readonly elRef: ElementRef<HTMLTextAreaElement>) {}

  @HostListener('change')
  @HostListener('input')
  public changes() {
    const elem = this.elRef.nativeElement;
    this.hasScrollBar.emit(elem.clientHeight < elem.scrollHeight);
  }
}

<textarea appText (hasScrollBar)="print($event)"></textarea>

Answer 2

Try so maybe

const 
txt = document.getElementById("text"),
txts = txt.style.height,
pd = '70px';

console.log(pd);

if (txts !== pd) {
  txt.style.background = "black";
}