鼠标在iframe上时，Angular无法滚动页面

Question

我在需要显示一些内容的应用程序中工作，我从服务器获取内容并循环显示内容以显示每个元素，我创建了一个条件以不同的方式显示内容内容类型的方式，如果是图像，则使用<img>，如果是视频，则使用<iframe>，如果是段落，则使用<p>，但是由于某种原因，当我滚动时在页面上，当鼠标到达视频时，页面停止滚动，滚动不再起作用，如果将鼠标移到视频之外，滚动将再次起作用。

模板

<article *ngFor="let block of chapter.blocks">
  <!-- Video BLock -->
  <iframe width="100%" height="315" *ngIf="block.blockType === 'Clip'" [src]="block.blockElement.url" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

  <!-- Image Block -->
  <div class="img-chapter" *ngIf="block.blockType === 'Image'">
    <img [src]="'data:image/jpg;base64,' + block.blockElement.img" alt="img">
    <div class="caption">
      <p>{{chapter.title}}</p>
    </div>
  </div>

  <div class="quiz" *ngIf="block.blockType === 'Quiz'">
    <h3 class="quiz-question">{{block.blockElement.questionText}}</h3>
    <div *ngFor="let question of block.blockElement.answers">
      <mat-checkbox *ngIf="question.text.length > 0" (click)="pushAnswer(question.number, block)"><span [ngClass]="{'red-400-fg': !question.isCorrect && block.checked, 'green-A700-fg': question.isCorrect && block.checked }">{{question.text}}</span></mat-checkbox>
    </div>
    <button mat-flat-button class="mt-16" (click)="checkQuiz(block)" color="accent">Check</button>
  </div>

  <!-- Paragraph Block -->
  <p *ngIf="block.blockType === 'Paragraph'" oncut="return false" onpaste="false" onkeypress="return false" contenteditable="true" spellcheck="false" autocorrect="off" draggable="return false;" ondragover="return false;" ondrop="return false;"
    [attr.data-chapter-id]="block.chapterId" [attr.data-concurrency]="block.concurrencyToken" [attr.data-block-id]="block.id" [innerHTML]="block.blockElement.text"></p>

  <!-- Enumaration Block -->
  <div *ngIf="block.blockType === 'Enumeration'">
    <fuse-enumeration-block [data]="block"></fuse-enumeration-block>
  </div>

  <!-- TextAddion Block -->
  <div *ngIf="block.blockType === 'TextAddition'">
    <fuse-text-additon [data]="block" [markerColors]="markerColors"></fuse-text-additon>
  </div>

  <!-- Table Block -->
  <div *ngIf="block.blockType === 'TableElement'">
    <fuse-table-component [data]="block"></fuse-table-component>
  </div>
</article>

样式

article {
  max-width: 100%;

  .quiz {
    margin-bottom: 35px;

    .quiz-question {
      font-weight: 500;
    }
  }

  ul {
    margin: 0 0 15px;
  }

  p {
    hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
    position: relative;
    color: transparent;
    text-shadow: 0 0 0 #000;
    margin: 0 0 15px;
    line-height: 1.5;
    font-weight: 300;

    &:focus {
      outline: none;
    }

    > span {
      user-select: none;
      position: absolute;
      top: 0;
      left: -12%;
      width: 25px;
      height: 100%;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      border-right: 1px solid rgb(221, 215, 215);

      mat-icon {
        height: 15px;
        width: 15px;
        min-height: 15px;
        min-width: 15px;
        font-size: 16px;
      }
    }
  }

  iframe {
    width: 100%;
    height: 400px;
    border: none;
    margin: 0 auto 15px;
  }

  .img-chapter {
    width: 70%;
    margin: 0 auto 15px;
    @include mat-elevation(2);

    img {
      width: 100%;
      display: block;
    }

    .caption {
      padding: 10px 10px 0;
      box-shadow: 0 0 0 1px rgb(230, 230, 230) inset;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;

      p {
        strong {
          letter-spacing: 1.2px;
          color: rgb(84, 84, 84);
        }
        margin: 0 0 10px;
        font-size: 12px;
        color: rgb(172, 172, 172);
      }
    }
  }
}

正如您在图片中看到的那样，是否将鼠标放在视频的顶部，我无法滚动页面，如果将鼠标放在内容中其他可以滚动的位置，则无法滚动页面。