SwiftUI 如何隐藏 List 组件的垂直滚动条

原生CSS通用方案 #

所有可滚动的List容器都可以用CSS实现滚动条隐藏，隐藏后滚动功能不受影响，用户依然可以通过鼠标滚轮、触摸滑动等操作正常滚动列表：

• Webkit内核浏览器（Chrome、Safari、新版Edge）适配样式：

/* 下面的.list-container替换为你List组件滚动容器的实际类名 */
.list-container::-webkit-scrollbar {
  display: none;
}

• Firefox浏览器适配样式：

.list-container {
  scrollbar-width: none;
}

• IE/旧版Edge浏览器适配样式：

.list-container {
  -ms-overflow-style: none;
}

如果是你完全自定义封装的List组件，需要先给外层容器设置固定高度+overflow-y: auto开启滚动，再加上面的样式才能生效

主流UI组件库快捷配置 #

如果你用的是开源UI框架的List组件，可以直接用内置属性配置，不需要额外写CSS：

• Ant Design系列List/ScrollView组件：添加scroll={{ scrollbar: false }}属性
• Element Plus系列List/Scrollbar组件：添加hide-scrollbar属性
• Vant移动端List组件：添加hide-scrollbar属性

所有方案都只是隐藏滚动条的视觉效果，不会对列表的滚动逻辑、内容渲染产生任何影响。

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