Vue+Vite项目移动端使用::-webkit-scrollbar隐藏滚动条不生效

当前使用的*::-webkit-scrollbar { display: none !important; }规则仅适配了桌面端Webkit内核浏览器的自定义滚动条场景：

• 移动端Chrome、iOS Safari以及DevTools移动端模拟环境下的滚动条是系统原生绘制的浮动层，不会响应webkit滚动条伪类的样式控制
• 火狐、IE/旧版Edge等非Webkit内核浏览器本身就不识别::-webkit-scrollbar伪元素，对应规则自然不会生效

把原有全局滚动条隐藏样式替换为下面的全兼容写法，覆盖所有主流浏览器规则即可，不会禁用原生滚动能力：

/* 全局隐藏所有元素滚动条，保留滚动功能 */
* {
  /* 兼容IE、旧版Edge浏览器 */
  -ms-overflow-style: none;
  /* 兼容火狐浏览器、移动端现代浏览器 */
  scrollbar-width: none;
}
/* 兼容Webkit内核浏览器（桌面端Chrome、Safari、新版Edge等） */
*::-webkit-scrollbar {
  display: none !important;
}

• 这段样式必须作为全局样式引入，推荐写在项目默认的src/style.css文件中，确认入口文件main.js/main.ts里已经正确import了这个样式文件；不要把这段代码写在带scoped标记的组件style标签里，否则选择器生效范围会被组件隔离，无法覆盖全局滚动元素。
• 当前使用的viewport元标签是标准移动端适配配置，和滚动条无法隐藏的问题无关，不需要修改。
• 不要为了隐藏滚动条给html、body或者具体滚动容器设置overflow: hidden属性，该属性会直接禁用元素的滚动能力，不符合需求。
• 如果DevTools移动端模拟模式下修改样式后滚动条仍然存在，执行硬刷新清除缓存即可，模拟器本身存在静态资源缓存的概率。

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