uni-app scroll-view隐藏滚动条的小细节 兼容主流浏览器

开端

想写个横向滚动的列表适配浏览器,主要就是隐藏一下滚动条在手机上美观一点。
但是使用uni-app官方文档建议的::-webkit-scrollbar在目标标签时发现没生效。

.scroll-view_H::-webkit-scrollbar{
  display: none;
}

在这里插入图片描述

解决

F12看了一下,原来编译到浏览器端时scroll-view下自动套了几层div,::-webkit-scrollbar生效了,只是生效的地方错了,
在这里插入图片描述
解决很简单,目标标签加上空格div就行了,顺便::-webkit-scrollbar也并非标准写法,要想在firefox和IE生效可参考如下写法

.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. TCP协议是安全的吗?

    2024-05-02 08:34:05       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-05-02 08:34:05       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-05-02 08:34:05       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-05-02 08:34:05       18 阅读

热门阅读

  1. 嵌入式一些面试题

    2024-05-02 08:34:05       7 阅读
  2. 6.k8s中的secrets资源-初识secret

    2024-05-02 08:34:05       10 阅读
  3. Edge的使用心得与深度探索

    2024-05-02 08:34:05       10 阅读
  4. 大数据组件之Storm简介

    2024-05-02 08:34:05       15 阅读
  5. 嵌入式Linux编辑器vi

    2024-05-02 08:34:05       10 阅读
  6. 关于PostgreSQL的20道面试题

    2024-05-02 08:34:05       11 阅读
  7. 陪同口译VR情景实训教学系统开发

    2024-05-02 08:34:05       11 阅读
  8. 蓝桥杯练习系统(算法训练)ALGO-952 简易编辑器

    2024-05-02 08:34:05       9 阅读
  9. Podman相比Docker在轻量级部署上的优势是什么?

    2024-05-02 08:34:05       13 阅读
  10. 【leetcode】链表反转题目总结

    2024-05-02 08:34:05       13 阅读
  11. Leetcode 225. Implement Stack using Queues

    2024-05-02 08:34:05       9 阅读