从角度溢出项目中删除滚动条

Question

* 项目描述

我正在使用 angularJS 为网站创建响应式玩家信息页面，在最左侧，我正在制作数据库中所有其他玩家的列表，显示为图片图标，用户可以点击其中任何一个来获取他们的信息页面。

* 问题

我的问题是我想让列表具有特定的高度“用户浏览器窗口的高度或移动模式下用户屏幕的宽度”，为了解决这个问题，我使用了“溢出：自动”，它确实做到了那个，但它也产生了一个丑陋的滚动条“在桌面模式或一般的大窗口中”，我想摆脱它，在“小和 xs”中，我不介意滚动条，但在“大”窗口上滚动条很丑。

* 我尝试过的

我尝试创建一个 CSS 类，在其中放置一个隐藏滚动条的填充。

代码

    width: 100%;
    overflow: auto;
    height: 100%;
    padding-right: 15px;

但它产生了其他错误并且它并不完美，因为在某些窗口上滚动条大小不同并且不会全部隐藏，在移动设备上它也删除了不理想的滚动条。

* 我想要什么/期望什么

我想要

1. 从“大于小屏幕”中删除滚动条，最好将其保留在“小屏幕和超小屏幕”上。
2. 更改特定滚动条的外观以匹配网站设计或更改其一般形状。

任何一个选项对我来说都足够好。

* 我的代码

Stackblitz Project

- 使用的库和版本

• Angular Js V:5.1
• Flex 布局“角度”V：2.00 beta 12
• 角材料 V：5.01

Answer 1

这应该会给你提供你需要做的事情的动力：

我最近抓住this code from W3Schools 做类似的事情并将其更改为以下内容。

一些媒体查询并将宽度更改为 0 可能只是为了隐藏滚动条。其余外观由您决定。

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

/* Track */
::-webkit-scrollbar-track {
  /* box-shadow: inset 0 0 5px grey;  */
  /* border-radius: 5px; */
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25); 
  /* border-radius: 5px; */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
  cursor: grab;
}