在 NgbModal 中使用 cdk-virtual-scroll-viewport 进行水平滚动答案

【问题标题】：Horizontal scrolling with cdk-virtual-scroll-viewport inside NgbModal在 NgbModal 中使用 cdk-virtual-scroll-viewport 进行水平滚动
【发布时间】：2020-06-29 22:48:28
【问题描述】：

我在 NgbModal 中显示这个组件：

<div id="gallerypopup">
  <div id="main-image">
    <lib-ngx-image-zoom id="zoomer"
      [thumbImage]="item.thumbnailUrls[selectedIndex]"
      [fullImage]="item.imageUrls[selectedIndex]"
      zoomMode="click"
      ></lib-ngx-image-zoom>
  </div>
  <cdk-virtual-scroll-viewport orientation="horizontal" itemSize="400" minBufferPx="400" maxBufferPx="400" class="viewport">
    <span *cdkVirtualFor="let thumbnail of item.thumbnailUrls; let index = index;" class="thumbcell">
      <img [src]="thumbnail" height="300" (click)="selectImage(index)" /
    </span>
  </cdk-virtual-scroll-viewport>
</div>

使用以下 CSS：

#gallerypopup {
  height: 75%;
  width: 75%;
}

.thumbcell {
  height: 300px;
  width: 400px;
  background-color: #dddddd;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.viewport {
  height: 300px;
}

.cdk-virtual-scroll-content-wrapper {
  display: flex;
  flex-direction: row;
}

.ngxImageZoomFullContainer {
  cursor: zoom-out;
}

.ngxImageZoomThumbnail {
  cursor: zoom-in;
}

但即使滚动视口设置为水平方向，缩略图仍会垂直堆叠。我该如何解决？我怀疑问题是可滚动区域被错误地限制为使其宽度适合模式弹出窗口的宽度（出于某种原因，尽管第一个 CSS 规则，它不是浏览器窗口的 75%）。

【问题讨论】：

标签： angular-material2 horizontal-scrolling angular-bootstrap

【解决方案1】：

您是否尝试过以下方法来水平显示元素？

.cdk-virtual-scroll-content-wrapper .viewport {
  display: flex;
  flex-direction: row;
}

【讨论】：

【解决方案2】：

事情是 .viewport 子布局仍然是垂直的。

解决方案：

.viewport .cdk-virtual-scroll-content-wrapper {
  display: flex;
  flex-direction: row;
}

这是stackblatz 这是来自angular material doc 的示例，我已对其进行了修改。

【讨论】：