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

news2024/11/26 10:11:01

开端

想写个横向滚动的列表适配浏览器,主要就是隐藏一下滚动条在手机上美观一点。
但是使用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 */
}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1639463.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于 Wireshark 分析 IP 协议

一、IP 协议 IP(Internet Protocol)协议是一种网络层协议,它用于在计算机网络中实现数据包的传输和路由。 IP协议的主要功能有: 1. 数据报格式:IP协议将待传输的数据分割成一个个数据包,每个数据包包含有…

Ant Design助力:实现用户列表的优雅展示与管理

文章目录 概要前端讲解登录组件注册组件用户列表组件 后端讲解连接数据库db.js路由routes.jsexpress应用app.js 启动项目小结 概要 在上一篇博客🚪中,我们已经成功实现了登录注册系统的基本功能。现在,我们将进一步完善系统,实现…

第一课 自动驾驶概述

1. contents 2. 什么是无人驾驶/自动驾驶 3 智慧出行大智慧 4. 无人驾驶的发展历程

用户中心(末)

文章目录 开发用户注销前后端后端前端 补充用户注册校验逻辑前后端设计后端前端 后端代码优化封装通用返回对象封装全局异常处理全局请求日志和登录校验 TODO 前端代码优化 开发用户注销前后端 后端 当用户登录成功之后,我们在请求体的 session 中保存了用户的登录…

一对一WebRTC视频通话系列(一)—— 创建页面并显示摄像头画面

本系列博客主要记录WebRtc实现过程中的一些重点&#xff0c;代码全部进行了注释&#xff0c;便于理解WebRTC整体实现。 一、创建html页面 简单添加input、button、video控件的布局。 <html><head><title>WebRTC demo</title></head><h1>…

vue2(4)之scoped解决样式冲突/组件通信/非父子通信/ref和$refs/异步更新/.sync/事件总线/provide和inject

vue2 一、学习目标1.组件的三大组成部分&#xff08;结构/样式/逻辑&#xff09;2.组件通信3.综合案例&#xff1a;小黑记事本&#xff08;组件版&#xff09;4.进阶语法 二、scoped解决样式冲突**1.默认情况**&#xff1a;2.代码演示3.scoped原理4.总结 三、data必须是一个函数…

自动驾驶规划与控制技术解析

目录 1. 自动驾驶技术 2.定位location 3. 地图HD Map ​编辑 4 预测prediction 5 自动驾驶路径规划 6. 自动驾驶路径规划 7. 规划planning 8. 视频路径 1. 自动驾驶技术 2.定位location 3. 地图HD Map 4 预测prediction 5 自动驾驶路径规划 6. 自动驾驶路径规划 7.…

IDEA 2022.1版本开始,可以直接运行Markdown里的命令行

参照这种格式&#xff1a; shell mvn clean install注意idea支持的版本&#xff1a;是从 2022.1版本开始的。 ps&#xff1a;之前有人写过了&#xff0c;感觉很实用但是蛮多开发者不一定会知道的功能。 参考资料&#xff1a; https://www.cnblogs.com/didispace/p/16144107.h…

2.4Java全栈开发前端+后端(全栈工程师进阶之路)-前端框架VUE3-基础-Vue组件

初识Vue组件 Vue中的组件是页面中的一部分&#xff0c;通过层层拼装&#xff0c;最终形成了一个完整的组件。这也是目前前端最流行的开发方 式。下面是Vue3官方给出的一张图&#xff0c;通过图片能清楚的了解到什么是Vue中的组件。 图的左边是一个网页&#xff0c;网页分为了…

革新DNA存储:DNA-QLC编码方案高效可靠,多媒体图像存储新时代启航

在数字信息爆炸的时代&#xff0c;传统存储介质正面临容量、持久性和能耗的极限挑战。为此&#xff0c;大连理工大学计算机科学与技术学院的研究团队在《BMC基因组学》发表了一篇开创性论文&#xff0c;介绍了一种名为DNA-QLC的创新编码方案&#xff0c;为DNA存储系统的高效性和…

基于免疫粒子群算法的考虑负荷需求相应的热电联供系统优化调度(MATLAB实现)

1.研究背景 随着“双碳”战略的提出&#xff0c;各种分布式能源的开发和利用收到越来越多的重视。冷热电联供(Combined Cooling Heating and Power, CCHP)系统在发电的同时可以将燃气轮机产生的废热用于制热或制冷&#xff0c;实现能量的梯级利用&#xff0c;并减少系统的污染气…

【热门话题】PostCSS:现代前端开发中的CSS增强工具

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 PostCSS&#xff1a;现代前端开发中的CSS增强工具一、引言二、PostCSS简介2.1 核…

前端工程化04-VsCode插件设置总结(持续更)

1、输出语句log设置 log输出、平常你输出log,还必须得打一个console然后再.log()非常不方便&#xff0c;当然我们可以直接输入一个log,但是提示有两个&#xff0c;我们还得上下选择 所以我们直接采用插件的提示 一个clg就可以了 2、括号包裹提示 找到VsCode的settings.js文…

学习java的继承

1.什么是继承 java中提供了一个关键字&#xff0c;extends&#xff0c;可以让一个类与另一个类建立起父子关系。 例如 public class B extends A { --- } 在这里&#xff0c;我们称A类为父类&#xff08;也被称为基类或者超类&#xff09;B类称为子类&#xff08;或者是派生…

汉王科技亮相世界数字健康论坛:以AI定义第四代血压计

作为科技行业的年度盛会&#xff0c;2024年中关村论坛年会于近日在北京揭幕。 作为中关村知名的人工智能企业&#xff0c;汉王科技携大模型的最新垂直应用、柯氏音法电子血压计等创新成果&#xff0c;在4月29日中关村论坛平行论坛“2024世界数字健康论坛”上亮相。 在《AI赋能血…

C语言/数据结构——每日一题(反转链表)

一.前言 大家好&#xff01;今天又是每日一题环节。今天我为大家分享了一道单链表题——反转链表。 废话不多说&#xff0c;让我们直接进入正题吧。 二.正文 1.1题目信息 这是一道leetCode上面的一道题&#xff1a;https://leetcode.cn/problems/reverse-linked-list 1.2解…

[技术小技巧] 可视化分析:在jupyter中使用d3可视化树形结构

首先在python中定义一个字符串&#xff0c;记录d3.js绘制属性图的js脚本代码模版。其中{{data}}就是将来要被替换的内容。 d3_code_template """ // 创建树状结构数据 var treeData {{data}};// 创建d3树布局 var margin { top: 20, right: 90, bottom: 30,…

云原生Kubernetes: K8S 1.29版本 部署Harbor

目录 一、实验 1.环境 2.Linux 部署docker compose 3.证书秘钥配置 4.K8S 1.29版本 部署Harbor 5.K8S 1.29版本 使用Harbor 二、问题 1.docker 登录harbor失败 一、实验 1.环境 &#xff08;1&#xff09;主机 表1 主机 主机架构版本IP备注masterK8S master节点1.2…

使用CNN或resnet,分别在flower5,flower17,flower102数据集上实现花朵识别分类-附源码-免费

前言 使用cnn和resnet实现了对flower5&#xff0c;flower17&#xff0c;flower102数据集上实现花朵识别分类。也就是6份代码&#xff0c;全部在Gitee仓库里&#xff0c;记得点个start支持谢谢。 本文给出flower17在cnn网络实现&#xff0c;flower102在resnet网络实现的代码。…

BJFUOJ-C++程序设计-实验3-继承和虚函数

A TableTennisPlayer 答案&#xff1a; #include<iostream> #include<cstring> using namespace std;class TableTennisPlayer{ private:string firstname;string lastname;bool hasTable;public:TableTennisPlayer(const string &, const string &, bool…