如何在 Angular 9 中添加自定義水平和垂直滾動？

Question

我有一個 angular 應用程序，用戶在其中上傳文件，然后我在 UI 上顯示文件的內容。 該文件可能很長，所以我需要垂直滾動，對於更長的行，我想要水平滾動。 所以我想我需要一個框來顯示水平和垂直滾動的內容。

app.component.ts的代碼

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  fileContent: string = '';

  public onChange(fileList: FileList): void {
    let file = fileList[0];
    let fileReader: FileReader = new FileReader();
    let self = this;
    fileReader.onloadend = function(x) {
      self.fileContent = fileReader.result;
    }
    fileReader.readAsText(file);
  }
}

app.component.html的代碼

<input type="file" (change)="onChange($event.target.files)">

<div>
  <h3>File Content</h3>
  <pre> {{fileContent}} </pre>
</div>

如何添加水平和垂直滾動？ 提前致謝。

Answer 1

在要滾動的元素上，只需添加屬性overflow: auto;

在您的情況下，您可能想在您的 div 上執行此操作，我建議添加一個 class ，然后應用屬性使其溢出。

.myDiv {
    overflow: auto;
}

如果你想要特定的方向，你有overflow-x: scroll; 和overflow-y: scroll; .