nz-table 拖拽排序 滚动条不自动滚动

环境

angular : 8.1.2
angular/cdk : 8.1.2

处理

Html

使用原生table

<table class="dragTable">
      <thead>
      <tr>
        <th style="width: 100px">姓名</th>
        <th style="width: 180px">年龄</th>
        <th style="width: 80px">性别</th>
        <th style="width: 180px">职业</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody cdkDropList (cdkDropListDropped)="drop($event)"
      [ngStyle]="{'max-height': '150px', 'overflow-y': 'scroll', 'display': 'block', '-webkit-overflow-scrolling': 'touch'}"
      >
      <tr *ngFor="let data of list; let index = index" cdkDrag 
          (cdkDragMoved)="test($event)"
          (cdkDragStarted)="test1($event)"
      >
        <td style="width: 100px">{{ data.name }}</td>
        <td style="width: 180px">{{ data.age }}</td>
        <td style="width: 80px">{{ data.sex }}</td>
        <td style="width: 180px">{{ data.job }}</td>
        <td>
          <button nz-button nzType="danger"
                  style="margin-bottom: 0"
                  nzSize="small"
          >
            <i nz-icon nzType="delete" nzTheme="outline"></i>
          </button>
        </td>
      </tr>
      </tbody>
    </table>

Css

     .dragTable {
        border: 1px solid #e8e8e8;
        border-radius: 4px;
      }

      .dragTable tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
        border-bottom: 1px solid #e8e8e8;
      }

      .dragTable thead tr {
        display: table;
        width: calc(100% - 17px);
        table-layout: fixed;
        border-bottom: 1px solid #e8e8e8;
      }

       
      .dragTable table thead {
        width: 100%
      }


      .dragTable thead th,
      .dragTable tbody td  {
        padding: 8px;
      }