仿Ant Design Vue风格自定义浏览器滚动条样式

news2025/3/16 5:00:03

仿Ant Design Vue风格自定义浏览器滚动条样式

问题原因

浏览器默认的滚动条样式很丑,无法满足需求,需要自定义滚动条样式,参考ant-design-vue的样式

css修改滚动相关属性可查阅官方文档


选择器介绍

  1. ::webkit-scrollbar:滚动条
  2. ::-webkit-scrollbar-track:滚动条的轨道
  3. ::-webkit-scrollbar-track-piece:滚动条的轨道的顶部和底部
  4. ::-webkit-scrollbar-corner:滚动条的角落
  5. ::-webkit-scrollbar-button:滚动条的箭头按钮
  6. ::-webkit-scrollbar-thumb:滚动条的滑块
  7. ::-webkit-scrollbar-thumb:hover:滚动条的滑块hover

样式设置

示例
在这里插入图片描述

custom-scrollbar是自己的滚动元素的类名,根据实际修改

/* 设置滚动条宽度 */
.custom-scrollbar::webkit-scrollbar {
    width: 10px;
}

/* 设置滑块样式 */
.custom-scrollbar::webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

/* 滑块hover样式 */
.custom-scrollbar::webkit-scrollbar-thumb:hover {
    background: #636363;
}

/* 箭头按钮 */
.custom-scrollbar::webkit-scrollbar-button {
    width: 10px;
    height: 20px;
}

/* 向上箭头图标 */
.custom-scrollbar::webkit-scrollbar-button:vertical:decrement::before {
    background-image:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238b8b8b"><path d="M12 8l-6 6h12z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}

/* 向下箭头图标 */
.custom-scrollbar::webkit-scrollbar-button:vertical:decrement::before {
    background-image:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238b8b8b"><path d="M12 16l6-6h-12z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}

注意事项

  1. 浏览器兼容性
  • -webkit-前缀适用于Chrome/Safari/Edge
  • Firefox需使用scrollbar-width和scrollbar-color
  • IE不支持自定义样式
  1. 常见问题排查
  • 样式未生效时检查选择器命名一致性
  • 确保容器内容溢出(overflow属性生效)
  • 使用!important覆盖第三方库样式
  1. 性能优化
    避免在滚动区域使用复杂的阴影和渐变效果,可能导致滚动卡顿。

效果对比建议

在Chrome浏览器中运行代码,分别注释掉自定义样式,观察默认样式与定制后的视觉效果差异。实际项目中建议配合UI设计稿调整色值参数。

如果需要具体项目的实现细节或遇到适配问题,欢迎在评论区交流讨论!

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

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

相关文章

单元测试、系统测试、集成测试、回归测试的步骤、优点、缺点、注意点梳理说明

单元测试、系统测试、集成测试、回归测试的梳理说明 单元测试 步骤&#xff1a; 编写测试用例&#xff0c;覆盖代码的各个分支和边界条件。使用测试框架&#xff08;如JUnit、NUnit&#xff09;执行测试。检查测试结果&#xff0c;确保代码按预期运行。修复发现的缺陷并重新测…

网络安全反渗透 网络安全攻防渗透

网络渗透防范主要从两个方面来进行防范&#xff0c;一方面是从思想意识上进行防范&#xff0c;另一方面就是从技术方面来进行防范。 1.从思想意识上防范渗透 网络攻击与网络安全防御是正反两个方面&#xff0c;纵观容易出现网络安全事故或者事件的公司和个人&#xff0c;在这些…

《GitHub网路访问不稳定:解决办法》:此文为AI自动生成

《GitHub网路访问不稳定&#xff1a;解决办法》&#xff1a;此文为AI自动生成 GitHub 网路访问不稳定初现 在当今数字化时代&#xff0c;软件开发行业蓬勃发展&#xff0c;GitHub 作为全球最大的代码托管平台&#xff0c;已然成为无数开发者不可或缺的 “宝库”。它不仅汇聚了…

G-Star 公益行 | 温暖相约 3.30 上海「开源×AI 赋能公益」Meetup

你是否曾想过&#xff0c;在这个数字化浪潮席卷的时代&#xff0c;公益组织如何突破技术瓶颈&#xff1f;当 AI 成为热门话题&#xff0c;它能为公益事业带来怎样的温度&#xff1f;开源的力量&#xff0c;如何让每一份善意都拥有无限可能&#xff1f; G-Star 公益行&#xff…

docker pull 镜像问题

问题一&#xff1a;pull镜像报错:time out 分析&#xff1a;源问题&#xff0c;网络不稳定&#xff0c;更换加速源&#xff0c;地址&#xff1a;/etc/docker/daemon.json 解决&#xff1a;更换地址&#xff0c;如下&#xff0c;然后敲&#xff1a;docker daemon-reload &&…

STAR Decomposition 一种针对极端事件的信号分解方法 论文精读加复现

STAR 分解&#x1f680; 在时序预测任务中&#xff0c;为了情绪化信号的各种成分&#xff0c;例如趋势信息季节信息等往往都需要对信号进行分解。目前熟知的分解方式有很多种&#xff0c;经验模态分解 EMD 变分模态分解 VMD &#xff0c;还有 集合经验模态分解 EEMD&#xff0c…

基于SpringBoot + Vue 的房屋租赁系统

基于springboot的房屋租赁管理系统-带万字文档 SpringBootVue房屋租赁管理系统 送文档 本项目有前台和后台两部分、多角色模块、不同角色权限不一样 共分三种角色&#xff1a;用户、管理员、房东 管理员&#xff1a;个人中心、房屋类型管理、房屋信息管理、预约看房管理、合…

Excel中国式排名,3种方法!

大家好&#xff0c;我是小鱼。 什么是中国式排名呢&#xff1f; 举个例子比如说公司一共有10名员工进行成绩考核&#xff0c;如果9个人考核成绩都是90分&#xff0c;你是89分&#xff0c;按照国际惯用的排名法则&#xff1a;9 个人考核成绩并列第一&#xff0c;你第10名&…

Flutter:跑马灯公告栏

组件 import dart:async; import package:flutter/material.dart; import package:ducafe_ui_core/ducafe_ui_core.dart;class MarqueeNotice extends StatefulWidget {/// 公告数据列表&#xff0c;每条公告包含title和descfinal List<Map<String, String>> notic…

Jmeter下载及环境配置

Jmeter下载及环境配置 java环境变量配置配置jdk环境变量检查是否配置成功JMeter下载 java环境变量配置 访问地址&#xff1a; https://www.oracle.com/cn/java/technologies/downloads/ 注意&#xff1a;需要自己注册账号 下载完成&#xff0c;解压后的目录为&#xff1a; …

【初级篇】如何使用DeepSeek和Dify构建高效的企业级智能客服系统

在当今数字化时代,企业面临着日益增长的客户服务需求。使用Dify创建智能客服不仅能够提升客户体验,还能显著提高企业的运营效率。关于DIfy的安装部署,大家可以参考之前的文章: 【入门级篇】Dify安装+DeepSeek模型配置保姆级教程_mindie dify deepseek-CSDN博客 AI智能客服…

微信小程序threejs三维开发

微信小程序threejs开发 import * as THREE from three; const { performance, document, window, HTMLCanvasElement, requestAnimationFrame, cancelAnimationFrame, core, Event, Event0 } THREE .DHTML import Stats from three/examples/jsm/libs/stats.module.js; im…

大数据-spark3.5安装部署之standalone模式

真实工作中还是要将应用提交到集群中去执行&#xff0c;Standalone模式就是使用Spark自身节点运行的集群模式&#xff0c;体现了经典的master-slave模式。集群共三台机器&#xff0c;具体如下 u22server4spark&#xff1a; master worker u22server4spark2&#xff1a; worke…

技术视界|构建理想仿真平台,加速机器人智能化落地

在近期的 OpenLoong 线下技术分享会 上&#xff0c;松应科技联合创始人张小波进行了精彩的演讲&#xff0c;深入探讨了仿真技术在机器人智能化发展中的关键作用。他结合行业趋势&#xff0c;剖析了现有仿真平台的挑战&#xff0c;并描绘了未来理想仿真系统的设计理念与实现路径…

AutoGen多角色、多用户、多智能体对话系统

2023-03-11-AutoGen 使用【autoGenchainlitdeepSeek】实现【多角色、多用户、多智能体对话系统】 1-核心思路 01&#xff09;技术要点&#xff1a;autoGenchainlitdeepSeek02&#xff09;什么是autoGen->autogen是微软旗下的多智能体的框架03&#xff09;什么是chainlit-&g…

SQL99 多表查询

内连接&#xff1a; select name, depart_name, city from employee e join department d on e.depart_id d.depart_id join location l on d.locat_id l.locat_id; 外连接 注&#xff1a;本图取自博客园大佬"anliux"的博客&#xff0c;原帖链接&#xff1a;【学…

sql靶场5-6关(报错注入)保姆级教程

目录 sql靶场5-6关&#xff08;报错注入&#xff09;保姆级教程 1.第五关 1.步骤一&#xff08;闭合&#xff09; 2.步骤二&#xff08;列数&#xff09; 3.报错注入深解 4.报错注入格式 5.步骤三&#xff08;数据库表名&#xff09; 6.常用函数 7.步骤四&#xff08;表…

矩阵分析-浅要理解(深度学习方向)

梯度分析与最优化 在深度学习的任务中&#xff0c;我们所期望的是训练一个神经网络&#xff0c;使得预测结果与真实标签之间的误差最小化&#xff0c;这可以近似看作是一个提供梯度下降等优化找到全局最优解的凸优化问题。 奇异值分解 在信息工程领域&#xff0c;对数据处理的…

校园安全用电怎么保障?防触电装置来帮您

引言 随着教育设施的不断升级和校园用电需求的日益增长&#xff0c;校园电力系统的安全性和可靠性成为了学校管理的重要课题。三相智能安全配电装置作为一种电力管理设备&#xff0c;其在校园中的应用不仅能够提高电力系统的安全性&#xff0c;还能有效保障师生的用电安全&am…

第十五届蓝桥杯大学B组(握手问题、小球反弹、好数)

一、握手问题 思路1&#xff1a; 1)先让所有人相互握手 第一个人49次 第二个人48次 第五十个人0次 共计01249 2)减去7个没握手的 016 #include<stdio.h> int main() {int a 50*49/2 - 7*6/2;printf("%d\n",a);return 0; } 运行结果&#xf…