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 */
}
相关推荐
666HZ66624 分钟前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss
二十十十十十1 小时前
微信点餐小程序—美食物
微信·小程序
向明天乄1 小时前
在小程序中实现实时聊天:WebSocket最佳实践
websocket·网络协议·小程序
h185385922441 小时前
租车小程序电动车租赁小程序php方案
小程序
海的诗篇_1 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
说私域1 小时前
基于开源AI智能客服、AI智能名片与S2B2C商城小程序的微商服务质量提升路径研究
人工智能·小程序·开源
牧杉-惊蛰2 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
PeterJXL3 小时前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
哎呦你好3 小时前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
今晚打老虎z5 小时前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net