从 angular 中的溢出项目中删除滚动条

Question

* 项目描述

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

* 问题

我的问题是我想使列表具有特定高度“用户浏览器的高度 window 或移动模式下用户屏幕的宽度”，为了解决这个问题，我使用了“溢出” : Auto” 正是这样做的，但它也产生了一个丑陋的滚动条“在桌面模式下或大 window 一般”我想摆脱，在“小和 xs”我不注意滚动条，但在“大”windows 滚动条很难看。

* 我试过的

我尝试制作一个 css class 并放置一个隐藏滚动条的填充。

代码

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

但它产生了其他错误并且它并不完美，因为在某些 windows 上滚动条大小不同并且它不会隐藏所有内容，而且在移动设备上它删除了不理想的滚动条。

* 我想要的/期望的

我要

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

任何一个选项都适合我。

* 我的代码

Stackblitz Project

- 使用的库和版本

• Angular Js V:5.1
• Flex-Layout“angular”V：2.00 beta 12
• Angular MaterialV: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;
}