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 */
}
相关推荐
微三云-轩5 分钟前
区块链:重构企业数字化的信任核心与创新动力
人工智能·小程序·区块链·生活·我店
babytiger26 分钟前
python 通过selenium调用chrome浏览器
前端·chrome
奶昔不会射手1 小时前
css3之grid布局
前端·css·css3
阿隆_趣编程2 小时前
为了方便相亲,我用AI写了一款小程序
前端·javascript·微信小程序
n12352353 小时前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
John_ToDebug3 小时前
从源码视角全面解析 Chrome UI 布局系统及 Views 框架的定制化实现方法与实践经验
c++·chrome·架构
没有bug.的程序员16 小时前
Redis Stream:轻量级消息队列深度解析
java·数据库·chrome·redis·消息队列
小菜全18 小时前
uniapp基础组件概述
前端·css·vue.js·elementui·css3
守城小轩19 小时前
Firefox Window 开发流程(三)
firefox·指纹浏览器·浏览器开发
心一信息19 小时前
ThreeJS骨骼示例
css·css3·html5