vue中css修改滚动条样式

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);
  }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

fatal: not a git repository (or any of the parent directories): .git

提示说没有.git这样一个目录 在命令行 输入 git init 然后回车就好了 git remote add origin https:/.git git push -u origin "master"

uniapp 企业微信侧边栏开发网页授权 注入企业权限 注入应用权限 获取userid(2)

1、网页授权,获取code 代码: oauthUrl() {const that thisuni.removeStorageSync(code)let REDIRECT_URI encodeURIComponent(window.location.href)let CORPID webConfig.appIdlet url https://open.weixin.qq.com/connect/oauth2/authorize?appi…

Tomcat运行后localhost:8080访问自己编写的网页

主要是注意项目结构,home.html放在src/resources/templates下的home.html下,application.properties可以不做任何配置。还有就是关于web包的位置,作者一开始将web包与tabtab包平行,访问8080出现了此类报错: Whitelabel…

不负众望~历时4年修炼,这本册子终于成书了(文末赠书)

名字:阿玥的小东东 学习:Python、C/C 主页链接:阿玥的小东东的博客_CSDN博客-python&&c高级知识,过年必备,C/C知识讲解领域博主 目录 精进Spring Boot首选读物 “小册”变“大书”,彻底弄懂Spring Boot 全方位配套资源…

中国算力大会丨看看中兴新支点国产系统如何提升算力

近日,由工业和信息化部、宁夏回族自治区人民政府共同主办的2023中国算力(基础设施)大会在宁夏银川拉开帷幕,为期三天的“算力中国”创新成果展精彩亮相。中兴新支点国产操作系统的亮相,引起现场众多嘉宾前来了解。 “中…

Istio入门体验系列——基于Istio的灰度发布实践

导言:灰度发布是指在项目迭代的过程中用平滑过渡的方式进行发布。灰度发布可以保证整体系统的稳定性,在初始发布的时候就可以发现、调整问题,以保证其影响度。作为Istio体验系列的第一站,本文基于Istio的流量治理机制,…

Certify The Web (IIS)

一、简介 Certify The Web 适用于 Windows的SSL 证书管理器用户界面,与所有 ACME v2 CA 兼容,为您的 IIS/Windows 服务器轻松地安装和自动更新来自 Letencrypt.org 和其他 ACME 证书授权机构的免费 SSL/TLS 证书,设置 https 从未如此简单。 …

Python“牵手”1688商品评论数据采集方法,1688API申请指南

1688平台API接口是为开发电商类应用程序而设计的一套完整的、跨浏览器、跨平台的接口规范,1688API接口是指通过编程的方式,让开发者能够通过HTTP协议直接访问1688平台的数据,包括商品信息、店铺信息、物流信息等,从而实现1688平台…

rtmp直播

技术要求:nginxnginx-rtmpffmpegVLC 跟着大佬走的: 传送门 准备工作: 首先需要一台公网ip的服务器 这是使用天翼云的弹性云主机:免费试用1个月 天翼云官网 点击关机,更多里面选择重置密码, 默认用户名为…

【2023七夕】星河漫舞,七夕的璀璨之夜。分享:七夕表白的前端特效(附完整原代码+详细注释),情不知何起,却一往情深。愿天下有情人终成眷属

满山遍野你的脸庞,唯有遗忘是最漫长。 又一年的七夕了,今年,你还是孤单一人吗? … … 若是的话,咱们可是一个阵营的!!! 🎯作者主页: 追光者♂🔥 🌸个人简介: 💖[1] 计算机专业硕士研究生💖 🌿[2] 2023年城市之星领跑者TOP1(哈尔滨)🌿…

Wapp群发王,释放全球市场潜力

随着移动互联网的普及,WhatsApp在全球范围内的用户数量持续迅猛增长。据数据显示,截至2022年2月,WhatsApp的月活跃用户数已超过20亿,遍布全球180多个国家和地区,在 58 个国家更成为常用通讯软件。这使得 WhatsApp 成为…

PySide6学习笔记--基础环境的安装配置

PySide6介绍 QT官方发布Qt6.0之后,紧接着于2020年12月10日发布了PySide 6,对应C版的Qt6。从PySide6开始,PySide的命名也会与Qt的大版本号保持一致。需要注意的是使用PySide6开发的程序在默认情况下,不兼容Windows7系统&#xff0c…

区块链碎碎念

现在的区块链早已过了跑马圈地的时代,现在还按照以前承接项目的方式做区块链只能是越来越艰难。经过几年的技术沉淀,做区块链项目的公司都已经没落的七七八八了。 区块链不是一个能够快速显现盈利能力的行业,相反这个行业目前的模式还是处于…

DHCP协议原理与应用

DHCP协议原理与应用 一、DHCP协议概述1.1、场景描述1.1.1、场景描述11.1.2、场景描述21.1.3、场景描述3 二、DHCP协议工作原理2.1、DHCP简介2.2、DHCP协议名词解释2.3、DHCP服务器配置2.4、PC的DHCP设置2.5、DHCP协议工作过程2.6、DHCP协议报文及用途2.7、DHCP报文介绍2.7.1、D…

2023国赛数学建模B题思路模型代码 高教社杯

本次比赛我们将会全程更新思路模型及代码,大家查看文末名片获取 之前国赛相关的资料和助攻可以查看 2022数学建模国赛C题思路分析_2022国赛c题matlab_UST数模社_的博客-CSDN博客 2022国赛数学建模A题B题C题D题资料思路汇总 高教社杯_2022国赛c题matlab_UST数模社…

Git 命令

git log, git merge, git branch, git checkout, git rebase, git reset 分支合并,代码同步等等 所有git 使用中遇到的问题,均可解决,搜索:GitMaster888,即可找到

MySQL数据库的操作

目录 创建数据库字符集和校验规则查看系统默认字符集以及校验规则校验规则对数据库的影响 操纵数据库查看已经创建的数据库显示某个数据库的创建语句修改数据库删除数据库 数据库备份和还原备份还原 查看连接情况 创建数据库 语法: create database [if not exists] 数据库名字…

【Web开发指南】MyEclipse XML编辑器的高级功能简介

MyEclipse v2023.1.2离线版下载 1. 在MyEclipse中编辑XML 本文档介绍MyEclipse XML编辑器中的一些可用的函数,MyEclipse XML编辑器包括高级XML编辑,例如: 语法高亮显示标签和属性内容辅助实时验证(当您输入时)文档内容的源(Sou…

如何构造不包含字母和数字的webshell

利用不含字母与数字进行绕过 1.异或进行绕过 2.取反进行绕过 3.利用php语法绕过 利用不含字母与数字进行绕过 基本代码运行思路理解 <?php echo "A"^""; ?> 运行结果为! 我们可以看到&#xff0c;输出的结果是字符"!"。之所以会…

测试框架pytest教程(6)钩子函数hook开发pytest插件

pytest hook 函数也叫钩子函数&#xff0c;pytest 提供了大量的钩子函数&#xff0c;可以在用例的不同生命周期自动调用。 比如&#xff0c;在测试用例收集阶段&#xff0c;可利用 hook 函数修改测试用例名称的编码。 pytest的hook是基于Python的插件系统实现的&#xff0c;使…