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 */
}
相关推荐
云云只是个程序马喽1 小时前
AI漫剧创作系统开发定制指南
人工智能·小程序·php
U盘失踪了3 小时前
python curl转python脚本
开发语言·chrome·python
爱上好庆祝6 小时前
学习js的第五天
前端·css·学习·html·css3·js
W.A委员会7 小时前
让元素不显示的方法
css3
晓晨的博客8 小时前
ROS1录制的bag包转换为ROS2格式
前端·chrome
斯班奇的好朋友阿法法9 小时前
鸿蒙 vs iOS vs 微信小程序:开发平台全面对比
ios·微信小程序·harmonyos
love530love11 小时前
如何在 Google Chrome 中强制开启 Gemini AI 侧边栏(完整图文教程)
前端·人工智能·chrome·windows
一乐小哥1 天前
坚持迭代一个 Chrome 插件半年后,我的同事问我:"这不是 Chrome 自带的功能吗?"
chrome·github·ai编程
架构源启1 天前
OpenClaw 只能手动写脚本?我用 Chrome 插件实现了“录制即生成“
前端·人工智能·chrome·自动化
DFT计算杂谈1 天前
VASP官方教程 TRIQS DFT+DMFT计算教程
运维·css·自动化·html·css3