vue中css修改滚动条样式

news2024/12/23 9:10:17

vue中css修改滚动条样式

效果图:

在这里插入图片描述

代码(在app.vue中全局增加下面样式即可):

&::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 3px;
  }

  /*定义滚动条轨道 内阴影+圆角*/

  &::-webkit-scrollbar-track {
    //-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.05);
  }

  /*定义滑块 内阴影+圆角*/

  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    //-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background: rgba(0, 0, 0, 0.15);
  }

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

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

相关文章

服务器的介绍

1.服务器概述 1.1 服务器的基本概念 服务器是计算机的一种,是网络中为客户端计算机提供各种服务的高性能计算机; 服务器在网络操作系统的控制下,将与其相连的硬盘、磁带、 打印机及昂贵的专用通讯设备提供给网络上的客户站点共享&#xf…

HTML动态爱心特效代码【一】(附源码)

前言 七夕马上就要到了,为了帮助大家高效表白,下面再给大家带来了实用的HTML浪漫表白代码(附源码)背景音乐,可用于520,情人节,生日,表白等场景,可直接使用。 效果演示 文案修改 var loverNam…

2023七夕小程序

又是一年七夕节 往年七夕小程序 2020 https://blog.csdn.net/chen_227/article/details/107062998 2022 视频 QiXi2022 代码 https://gitee.com/chen227/qixi2022-qt-qml 2023 效果 代码 https://gitee.com/chen227/qixi2023-qt-qml

ICC2工具如何避免对mux选择信号端口进行检查

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧?拾陆楼知识星球入口 time.clock_gating_user_seeting_only这个option设置成false,导致对选择器的S端进行了时序分析,进而可能出现违例。 设置成true即可。

cuda面试准备(一),架构调试

1 cuda架构 硬件方面 SP (streaming Process) ,SM (streaming multiprocessor) 是硬件(GPUhardware) 概念。而thread,block,grid,warp是软件上的(CUDA) 概念 SP:最基本的处理单元,streaming processor,也称为CUDA core,最后具体的指令和任务都是在SP上处理的。GPU进行并行…

QT中按钮的基类QAbstractButton

QT中按钮的基类QAbstractButton 关于控件类的学习方法继承关系信号槽函数标题和图标按钮的 Check 属性 关于控件类的学习方法 控件类很多,API更多,但是不需要记忆知道控件对应的类名,通过帮助文档随用随查优先看帮助文档中控件对应的信号和槽…

速通蓝桥杯嵌入式省一教程:(八)ADC测量模拟电压

ADC(Analog to Digital Converter),模拟数字转换器,是电子工程师必须掌握的一个内容。由于单片机、计算机等是由0和1组成的,因此其无法直接测量或使用连续的模拟信号,需要用ADC将模拟信号转换为离散的数字信号。ADC的具体原理在此…

AM62x GPMC并口如何实现“小数据-低时延,大数据-高带宽”—ARM+FPGA低成本通信方案

GPMC并口简介 GPMC(General Purpose Memory Controller)是TI处理器特有的通用存储器控制器接口,支持8/16bit数据位宽,支持128MB访问空间,最高时钟速率133MHz。GPMC是AM62x、AM64x、AM437x、AM335x、AM57x等处理器专用于与外部存储器设备的接口…

SpringCloud之Stream3.0广播消息

SpringCloud之Stream消息驱动RocketMQ讲解_rocketmq stream_爱吃牛肉的大老虎的博客-CSDN博客3.0使用的函数式消费,如果使用广播消费,就是配置2个group,destination和生产者保持一致即可 spring.cloud.stream:bindings:testData-in-0:destin…

【3Ds Max】可编辑多边形“边”层级的简单使用

目录 简介 示例 1. 编辑边 (1)插入顶点 (2)移除 (3)分割 (4)挤出 (5)切角 (6)焊接 (7)桥 &…

一阶线性微分方程

形如: y ′ p ( x ) y q ( x ) (1.first) y p(x)y q(x) \tag{1.first} y′p(x)yq(x)(1.first) 的方程叫做一阶线性微分方程。 同济版教材的求解方法是常数变异法,初次接触感觉主编的脑回路异常清奇,自己怎么也get不到核心要义。一直到现…

隧道HTTP具备的条件

作为一名专业的爬虫代理供应商,我们都知道使用代理是保证爬虫的高效性和稳定性的重要手段之一。而隧道代理则是近年来备受推崇的一种代理形式,它通过将请求通过隧道传输,可以有效地隐藏爬虫的真实IP地址,提高爬虫的反爬能力。 在…

【中危】 Apache NiFi 连接 URL 验证绕过漏洞 (CVE-2023-40037)

漏洞描述 Apache NiFi 是一个开源的数据流处理和自动化工具。 在受影响版本中,由于多个Processors和Controller Services在配置JDBC和JNDI JMS连接时对URL参数过滤不完全。使用startsWith方法过滤用户输入URL,导致过滤可以被绕过。攻击者可以通过构造特…

【面试】项目经理面试题

文章目录 一、项目管理面试中通常会问到的问题1.项目管理软件工具知识2.做项目计划的技能3.人员管理技能4.沟通技巧5.方法论知识 二、问面试官的问题三. 面试系列推荐 一、项目管理面试中通常会问到的问题 1.项目管理软件工具知识 问题 1: 工期和工作量之间的差异是什么? 答案…

仓库管理的重点在哪?仓库管理能有哪些软件?

对于做实体生意的中小商户来说,仓库管理工作是重中之重的,仓库管理的好坏,直接影响着门店销售和财务状况。 但对于很多中小商户来说,没有足够的人力和精力去高效地做好仓库管理工作,而借助仓库管理软件或进销存软件来…

带你了解—在外远程群晖NAS-群晖Drive挂载电脑磁盘同步备份【无需公网IP】

文章目录 前言1.群晖Synology Drive套件的安装1.1 安装Synology Drive套件1.2 设置Synology Drive套件1.3 局域网内电脑测试和使用 2.使用cpolar远程访问内网Synology Drive2.1 Cpolar云端设置2.2 Cpolar本地设置2.3 测试和使用 3. 结语 前言 群晖作为专业的数据存储中心&…

为什么伦敦金的止损不灵了?

由于止损会给我们带来资金账户上的损失,所以我们已经很怕面对止损,但是很矛盾的是,我们在市场中又必须要面对止损,因为如果脱离了止损,对我们的交易危害将会很大,所以我们必须正视止损,并且用正…

基于微信小程序的校园失物招领平台的研究与实现(2.0版本,附源码,教程)

博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 1 简介 基于微信小程序的校园失物招领小程序 本课题的研究目的就是设计一款基于微信小程序的失物招领系统…

推荐两款在线免费的可视化网页编辑器:Layoutit!和RXStudio

2023年8月22日,周二上午 今天看Boost库的html文档时,突然也想自己写一个这样的html文档,但又不想手敲代码, 于是在网上找到了很多可视化的网页编辑器,最后我觉得这两款编辑器比较好用。 目录 Layout! 官网使用体验使…

有生日视频模板软件吗?分享一个模板丰富的视频软件

视频制作可以让你制作出一个生动、吸引人的生日视频,让你的生日祝福更加具有创意和个性化。通过使用生日模板视频,你可以省去很多制作视频的时间和精力,同时还可以获得高品质的视频输出。此外,生日模板视频通常具有专业的风格和设…