Angular 中如何适配 overflow 溢出元素的滚动条显示与样式

项目技术基础 #

• Angular 5.1
• Angular Flex-Layout 2.00 beta 12
• Angular Material 5.01

已完成的功能实现 #

• 基于以上技术栈开发响应式球员信息展示页
• 页面最左侧为全量球员图标列表：列表数据取自数据库存储的所有球员信息，以图片图标形式展示，用户点击任意图标即可加载查看对应球员的详情内容
• 列表自适应规则：桌面端场景下列表高度完全匹配浏览器窗口可视高度，移动端场景下列表宽度完全适配设备屏幕宽度
• 为保证内容溢出时用户可正常浏览，给列表容器添加overflow: auto属性实现自动滚动

现存开发问题 #

• 桌面端、大尺寸窗口场景下，overflow: auto触发的浏览器默认滚动条样式突兀，和网站整体设计风格不匹配
• 小屏、xs尺寸移动设备场景下，保留系统默认滚动条是符合交互预期的，不需要做隐藏处理
• 之前尝试的滚动条隐藏方案存在两个无法解决的缺陷：
  • 尝试的实现方式为给列表容器设置width: 100%; overflow: auto; height: 100%; padding-right: 15px;，试图通过预留内边距抵消滚动条占位，实现视觉上的滚动条隐藏
  • 兼容性缺陷：不同操作系统、不同设备的滚动条实际占位尺寸存在差异，固定15px的内边距无法适配所有场景，始终无法做到完全隐藏滚动条
  • 适配逻辑缺陷：该方案为全局生效，会连带隐藏小屏、xs设备上需要保留的滚动条，完全不符合响应式适配的预期

预期实现目标 #

满足以下任意一种效果即符合开发要求：

1. 结合响应式断点控制滚动条显示规则：仅在大于小屏尺寸的设备下隐藏列表的滚动条，小屏及xs尺寸设备下完整保留系统默认滚动条
2. 自定义滚动条的视觉外观，让滚动条样式和网站整体设计风格保持统一

内容的提问来源于stack exchange，提问作者yousif fayed