uni-app中::-webkit-scrollbar在小程序里有时失效，因微信/支付宝小程序的scroll-view是自定义组件，未启用enhanced或未形成BFC时伪元素无法匹配；需用class精准选择、设height:0和flex:1、加!important，并按平台差异配合enable-flex裁剪、基础库校验及双内核CSS兼容处理。
uni-app中::-webkit-scrollbar为什么在小程序里有时失效
因为微信/支付宝小程序的scroll-view不是原生div，而是平台自定义组件，其内部滚动容器不一定暴露给CSS伪元素控制——尤其当未启用enhanced或父容器未形成独立BFC时，::-webkit-scrollbar可能根本没被匹配到。
实操建议：
- 必须给
scroll-view加class（如class="my-scroll"），全局写.my-scroll::-webkit-scrollbar { display: none }，避免用uni-scroll-view这类泛选择器，它在部分小程序基础库中不生效 - 配合
height: 0; flex: 1确保滚动区域有明确渲染上下文，否则伪元素无处依附 - 在
App.vue里加!important提高权重：.my-scroll::-webkit-scrollbar { display: none !important; width: 0 !important; }
微信小程序隐藏滚动条必须用enable-flex + 溢出裁剪
纯CSS方案在微信小程序里存在兼容断层：基础库低于2.27.0时，::-webkit-scrollbar对scroll-view完全无效。此时得靠布局“骗过”渲染引擎。
实操建议：
- 外层
view设overflow: hidden，内层scroll-view加enable-flex并让宽度略超（如width: calc(100% + 2px)），滚动条就被物理切掉了 - 不要依赖
show-scrollbar="false"——这个属性在微信小程序中长期处于“文档写了但不执行”的状态 - 支付宝小程序可直接用
alwaysShowScrollbar="false"，但需先用my.getSystemInfoSync()校验基础库版本 ≥ 3.5.0
H5端要同时处理WebKit和Firefox双内核
H5环境不能只写::-webkit-scrollbar，否则Firefox用户会看到灰色滚动条。而scrollbar-width: none在Chrome里又无效，必须双管齐下。
实操建议：
- 在
scroll-view类上统一加两套规则：.my-scroll { scrollbar-width: none; -ms-overflow-style: none; } .my-scroll::-webkit-scrollbar { display: none; } - 如果项目用
uni-app编译H5，注意scroll-view会被转为<uni-scroll-view></uni-scroll-view>自定义标签，此时选择器要写成uni-scroll-view::-webkit-scrollbar - Android WebView偶尔卡住滚动条残留，可加
-webkit-overflow-scrolling: touch强制启用硬件加速
App端隐藏滚动条得区分iOS和Android底层机制
App端最麻烦：iOS的WKWebView默认滚动条只在拖动时闪现，而Android的WebView倾向于常驻显示。uni-app的show-scrollbar在两者上表现不一致，甚至同一设备不同系统版本也不同。
实操建议：
- 优先走CSS路线（
::-webkit-scrollbar），它在App端WebView中稳定生效，比属性控制更可靠 - 若需彻底关闭（比如做全屏滑动页），可在
pages.json中配置："app-plus": { "webview": { "scrollbar": "none" } }但仅对Vue页面有效，nvue页面不支持 - 别忽略真机测试——华为/小米部分机型会绕过CSS隐藏，必须搭配
enable-flex裁剪方案兜底
最容易被忽略的是：所有隐藏方案都不影响滚动逻辑本身，但scroll-view的高度计算错误会导致滚动直接失效——所以flex: 1必须配height: 0，这不是可选项，是前提。
