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 */
}
相关推荐
@PHARAOH8 小时前
WHAT - uni-app 条件编译技术
小程序·uni-app·条件编译
hunzi_110 小时前
选择网上购物系统要看几方面?
java·微信小程序·小程序·uni-app·php
z_mazin12 小时前
JavaScript逆向魔法:Chrome开发者工具探秘之旅
javascript·chrome·爬虫
芭拉拉小魔仙12 小时前
Uniapp Vue3 小程序接入实时音视频TUICallKit遇到的问题
小程序·uni-app·实时音视频
2305_7978820913 小时前
AI识图小程序的功能框架设计
人工智能·微信小程序·小程序
niuniu_66613 小时前
简单的自动化场景(以 Chrome 浏览器 为例)
运维·chrome·python·selenium·测试工具·自动化·安全性测试
暮雨哀尘14 小时前
微信小程序开发:开发实践
开发语言·算法·微信小程序·小程序·notepad++·性能·技术选型
幽络源小助理15 小时前
微信小程序实验室管理SSM系统设计与实现
微信小程序·小程序
自动花钱机1 天前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
zoahxmy09291 天前
微信小程序 request 流式数据处理
微信小程序