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 */
}
相关推荐
老李不敲代码3 分钟前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
HtwHUAT26 分钟前
五、web自动化测试01
前端·css·chrome·python·功能测试·selenium·html
fakaifa44 分钟前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
浏览器爱好者1 小时前
如何下载适用于语音识别功能增强的Google Chrome浏览器
人工智能·chrome·语音识别
二J2 小时前
管理100个小程序-很难吗
android·小程序
qq_357389633 小时前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码,医护小程序
小程序
yinzhiqing5 小时前
ubuntu24设置拼音输入法,解决chrome不能输入中文
前端·数据库·chrome
知识分享小能手5 小时前
JavaScript学习教程,从入门到精通,XMLHttpRequest 与 Ajax 请求详解(25)
开发语言·javascript·学习·ajax·前端框架·css3·html5
橘猫云计算机设计15 小时前
springboot-基于Web企业短信息发送系统(源码+lw+部署文档+讲解),源码可白嫖!
java·前端·数据库·spring boot·后端·小程序·毕业设计
凌冰_21 小时前
CSS3 基础(边框效果)
前端·javascript·css3