uni-app scroll-view隐藏滚动条的小细节 兼容主流浏览器

开端

想写个横向滚动的列表适配浏览器,主要就是隐藏一下滚动条在手机上美观一点。

但是使用uni-app官方文档建议的::-webkit-scrollbar在目标标签时发现没生效。

css 复制代码
.scroll-view_H::-webkit-scrollbar{
  display: none;
}

解决

F12看了一下,原来编译到浏览器端时scroll-view下自动套了几层div,::-webkit-scrollbar生效了,只是生效的地方错了,

解决很简单,目标标签加上空格div就行了,顺便::-webkit-scrollbar也并非标准写法,要想在firefox和IE生效可参考如下写法

css 复制代码
.scroll-view_H div::-webkit-scrollbar{
  display: none; /* Chrome Safari */
}
.scroll-view_H div{
  -ms-overflow-style: none; /* IE 10+ */
  scrollbar-width: none; /* Firefox */
}
相关推荐
极限挑战哥14 小时前
共享电单车联营平台分账架构实践:二清合规与自动分账零人工方案
java·大数据·人工智能·微信小程序·架构·微信公众平台
java1234_小锋20 小时前
【技术专题】CSS3 网页技术 - CSS3 布局进阶
前端·css·css3
超级新零售21 小时前
服装订货会数字化:商品版本、订单状态与后续配发数据如何衔接?
大数据·小程序·企业微信
10岁的博客21 小时前
Chrome 扩展安全攻防实录:从权限模型到真实漏洞复盘
前端·chrome·安全
云-缩影1 天前
拆解微信小程序后端架构:ECS、RDS、SSL 和 VPC 怎么配合
微信小程序·架构·ssl
拖孩1 天前
AI 帮我写的小程序上线 44 天:36 个人进了收银台,8 个人付钱
前端·后端·微信小程序
java1234_小锋1 天前
【技术专题】CSS3 网页技术 - CSS3 视觉增强
前端·css·css3
m0_743697591 天前
CentOS Stream 9 综合实验:FTP、DNS 与 Tomcat 排障
centos·tomcat·firefox
xiezhr1 天前
我用workBuddy开发了自己的第一个小程序并成功上线了
ai·小程序·ai agent·workbuddy