Angular GoogleMaps Marker InfoWindow 滚动条没有被隐藏答案

【问题标题】：Angular GoogleMaps Marker InfoWindow scrollbar not getting hiddenAngular GoogleMaps Marker InfoWindow 滚动条没有被隐藏
【发布时间】：2019-08-19 17:13:18
【问题描述】：

我正在尝试自定义单击标记时出现的弹出信息窗口，但我无法摆脱右侧出现的滚动条以防内容溢出。

https://pasteboard.co/Ith8X2v.png（使用图片模板时图片未加载）

我也尝试过添加所有父容器overflow: scroll，因为这似乎是唯一不同的地方（请参阅this）。

我制作了一个小片段，其中有点效果，但并不完全。 https://streamable.com/guoei

标记代码：

  <agm-marker *ngFor="let m of markers; let i = index"
              (markerClick)="clickedMarker(m.label, i)"
              [latitude]="m.lat"
              [longitude]="m.lng"
              [label]="m.label"
              [markerDraggable]="m.draggable">

    <agm-info-window>
      <div class="popup-info-container">
          <div class="popup-header-container">
              <strong>InfoWindow content</strong>
          </div>
          <div class="popup-body-container">
              <strong>InfoWindow content</strong>
          </div>
      </div>
    </agm-info-window>

  </agm-marker>

CSS 代码：

.popup-info-container {
  height: 400px;
  width: 300px;
  background-color: red;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;

  &::-webkit-scrollbar { 
    display: none; 
  } 
}

.agm-info-window-content {
  overflow: scroll;
}

.popup-header-container {
  height: 20%;
  width: 95%;
  background-color: blue;
}

.popup-body-container {
  height: 75%;
  width: 95%;
  background-color:whitesmoke;
}

我想得到类似this 的东西：滚动条淡出的地方。

【问题讨论】：

标签： css angular

【解决方案1】：

我在这里找到了类似的东西How to edit css of child component imported from other module Angular 2+

基本上我必须覆盖 angular 使用 ::ng-deep 生成的类

::ng-deep .gm-style {
  .gm-style-iw-d::-webkit-scrollbar {
    display: none !important;
  }
}

【讨论】：