使用ng-select时滚动条在Chrome不显示但Firefox正常 求解决方案

当前配置存在3个核心问题导致Chrome无法正常显示滚动条：

1. 滚动容器overflow属性配置错误：给.ng-dropdown-panel-items.scroll-host设置了overflow-y: visible，该属性值代表内容溢出时不裁剪也不显示滚动条，仅Firefox对ng-select内部布局的兼容性处理特殊才会显示滚动条，属于非预期表现
2. 滚动容器未设置高度阈值：没有给滚动容器配置max-height/固定高度，浏览器无法判断何时触发滚动逻辑
3. 滚动条样式存在语法错误：-webkit-box-shadow: inset 0 0 0px white(0, 0, 0, 0);是无效CSS语法，Chrome无法识别，会导致整套滚动条自定义样式失效

修正方案 #

• 调整CSS属性，将overflow-y改为auto，添加max-height，修正无效属性，修正后代码如下：

.ng-dropdown-panel {
  background: #eee;
  left: 0;
  margin-top: 10px;
  border-radius: 3px 3px 6px 6px;
  /* 父元素overflow:hidden保留，避免下拉框圆角被滚动条覆盖 */
  overflow: hidden;
  -webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.16);
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.16);
}

.ng-dropdown-panel .ng-dropdown-panel-items.scroll-host {
  /* 改为auto，内容超出max-height时自动显示滚动条 */
  overflow-y: auto !important;
  /* 自定义滚动触发的最大高度，可按需调整数值 */
  max-height: 320px !important;

  &::-webkit-scrollbar {
    width: 6px !important;
  }

  &::-webkit-scrollbar-track {
    /* 删掉无效的white()语法，直接用透明背景 */
    background: transparent;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
  }
}

• 处理Angular样式封装问题
  如果上述CSS写在业务组件的样式文件中，需要在选择器前加::ng-deep前缀才能命中ng-select的内部元素，或者直接将这段CSS放到全局样式文件（如styles.scss）中生效。
• 验证效果
  修改后Chrome下拉列表超出设置的max-height时会自动显示自定义滚动条，效果和Firefox保持一致。

效果参考 #

Chrome修正前效果：

Firefox正常效果（修正后Chrome会和该效果一致）：

内容的提问来源于stack exchange，提问作者Martin Rios