如何在 safari 上的角度材料垫选择中显示滚动条？

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); 
}