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 */
}
相关推荐
源码_V_saaskw9 天前
宇鹿家政服务系统小程序ThinkPHP+UniApp
微信小程序·小程序·uni-app·微信公众平台
说私域9 天前
云零售新中枢:定制化“开源AI智能名片+S2B2C商城小程序”驱动的沉浸式触点进化论
人工智能·小程序·开源·零售
伍哥的传说9 天前
React 轻量级状态管理器Zustand
前端·javascript·react.js·小程序·前端框架·ecmascript
mortimer10 天前
Chrome 开发者工具终极指南:从入门到精通
前端·chrome·浏览器
好好的哦10 天前
抖音小程序支付错误码141211
小程序·uni-app
橘子海全栈攻城狮10 天前
【源码+文档+调试讲解】基于web的运动健康小程序的设计与实现y196
java·开发语言·小程序·notepad++
即可皕10 天前
WebSocket长连接在小程序中的实践:消息推送与断线重连机制设计
websocket·网络协议·小程序
Haibakeji10 天前
海拔案例分享-门店业绩管理小程序
大数据·小程序
鱼雀AIGC10 天前
如何仅用AI开发完整的小程序<3>—创建小程序基础框架
小程序·aigc·ai编程
素界UI设计10 天前
北斗导航深度接入小程序打车:高精度定位如何解决定位漂移难题?
小程序