如何在角度材料中显示滚动条在野生动物园中选择？

Question

这是特定于浏览器的问题。在chrome，firefox和edge中，当mat-options比mat-select可以显示的更多时，会显示滚动条。由于滚动条，用户知道有更多选项。但是，在Safari中，滚动条仅在用户向下滚动时显示。这意味着用户可能不知道mat-select中有更多mat-options。这是一些示例代码：

<mat-select>
  <mat-option>
    Option 1 
  </mat-option>
  <mat-option>
    Option 2 
  </mat-option>
  <mat-option>
    Option 3 
  </mat-option>
  <mat-option>
    Option 4 
  </mat-option>
  <mat-option>
    Option 5 
  </mat-option>
  <mat-option>
    Option 6 
  </mat-option>
</mat-select>

如何强制滚动条始终显示在其他浏览器的Safari中？用户可能不知道选项6存在，否则在上面的示例中。

Answer 1

尝试在悬停时强制显示它

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4); 
    border-radius: 8px;
    -webkit-border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(100,100,100,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}