html - 如何在 Safari 浏览器中显示 Angular Material 垫选择中的滚动条？

Question

这是一个特定于浏览器的问题。在 chrome、firefox 和 edge 中，当有更多时显示滚动条 mat-options比mat-select可以显示。由于滚动条，用户知道有更多选项。然而，在 safari 中，滚动条仅在用户向下滚动时出现。这意味着用户可能不知道垫子选择中有更多垫子选项。下面是一些示例代码:

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