Question

这是特定于浏览器的问题。在chrome，firefox和edge中，当mat-options超过mat-select可以显示时，将显示滚动条。由于滚动条，用户知道还有更多选项。但是，在野生动物园中，滚动条仅在用户向下滚动时出现。这意味着用户可能不知道在垫选择中还有更多的垫选项。这是一些示例代码：

<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>

如何强制滚动条像其他浏览器一样始终显示在野生动物园中？用户可能不知道在上面的示例中否则存在选项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); 
}

如何在野生动物园的有角材质垫选择中显示滚动条？

1 个答案: