滚动条样式


/*滚动条*/
//滚动条没有滑块的轨道部分.
::-webkit-scrollbar-track-piece {background: #fff;border-radius: 0px;opacity: 1;border: 1px solid #D9D9D9;
}
//整个滚动条
::-webkit-scrollbar {width: 8px;height: 8px;background-color: transparent;
}
//滚动条上的滚动滑块
::-webkit-scrollbar-thumb {cursor: pointer;background: #4ab5a5;border-radius: 10px;width: 8px;border: none;//border-left: 1px solid #E1E2E8;//border-right: 1px solid #E1E2E8;transition: 0.3s ease-in-out;
}
//滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-button{cursor: pointer;display: flex; /*设置flex 否则垂直方向按钮 会出现2个*/width: 8px !important;height: 8px !important;background: #D9D9D9;/*水平滚动条按钮*/&:horizontal{&:start{background-image: url(~@/assets/images/scrollbar/arrow-left.png);background-size: cover; /* 确保图标覆盖整个按钮 */background-repeat: no-repeat; /* 确保图标不重复 */background-position: center; /* 确保图标在按钮中居中 */}&:end{background-image: url(~@/assets/images/scrollbar/arrow-right.png);background-size: cover; /* 确保图标覆盖整个按钮 */background-repeat: no-repeat; /* 确保图标不重复 */background-position: center; /* 确保图标在按钮中居中 */}}/*垂直滚动条按钮*/&:vertical{&:start:decrement{background-image: url(~@/assets/images/scrollbar/arrow-top.png);background-size: cover; /* 确保图标覆盖整个按钮 */background-repeat: no-repeat; /* 确保图标不重复 */background-position: center; /* 确保图标在按钮中居中 */}&:end{background-image: url(~@/assets/images/scrollbar/arrow-bottom.png);background-size: cover; /* 确保图标覆盖整个按钮 */background-repeat: no-repeat; /* 确保图标不重复 */background-position: center; /* 确保图标在按钮中居中 */}}
}

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

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

相关文章

经常加班却不给加班费,我又不想离开这个单位,该怎么办?

经常加班却不给加班费,我又不想离开这个单位,该怎么办? --#李秘书讲写作#教你如何在维护权益与保持工作稳定间找到平衡? 在现代社会中,加班已经成为许多职场人士的常态。你也许也不例外,每天都在忙碌的工作…

Python教程:机器学习 - 百分位数(4)

什么是百分位数? 统计学中使用百分位数(Percentiles)为您提供一个数字,该数字描述了给定百分比值小于的值。 例如:假设我们有一个数组,包含住在一条街上的人的年龄。 ages [5,31,43,48,50,41,7,11,15,3…

深入理解服务器路由功能:配置与应用详解

在现代网络结构中,服务器不仅仅是提供数据和服务的中心节点,它们还经常承担着路由的角色,负责在不同网络之间转发数据包。这一过程依赖于服务器的路由功能,通过精确的路由表配置和管理,确保数据能够高效、准确地到达目…

SSL协议在实际生活中有哪些应用实例?

SSL协议的实际应用案例 SSL(Secure Sockets Layer)协议是一种网络通信协议,用于在客户端和服务器之间建立加密链接,以确保数据在传输过程中的安全性。尽管SSL协议已被TLS(Transport Layer Security)协议所取…

AMS(ActivityManagerService)源码解析,Activity是如何被打开的

AMS解析,Activity是如何被打开的 前言总结1. PMS保存App缩略信息2. startActivity发送请求3. AMS从PMS获取目标Activity的相关信息3.1 AMS部分3.2 PMS部分 4. AMS操作Activity返回栈,将目标Activity调用resume5. AMS将目标页面信息发给ActivityThread6. …

STM32学习笔记(二)--GPIO通用输入输出口详解

(1)配置步骤1.使用RCC开启GPIO时钟2.使用GPIO_Init函数初始化GPIO3.使用输入或输出的函数等来控制GPIO 其中涉及外设有RCC、GPIO (2)代码示例 案例1(设置PA0为推挽输出) RCC_APB2PeriphClockCmd(RCC_APB2…

使用Spring Cloud设计电商系统架构

在当今互联网高速发展的时代,电子商务系统成为了商家与用户互动的主要方式之一。为了能够更好地应对高并发、可扩展性、灵活性等需求,微服务架构逐渐成为设计电商系统的首选方案。Spring Cloud作为一个成熟的微服务框架,为开发人员提供了一整…

后端开发面试题4(附答案)

前言 在下首语言是golang,所以会用他作为示例。 原文参见 @arialdomartini的: Back-End Developer Interview Questions 语言相关问题 1. 告诉我你的首选语言的三个最坏的缺陷。 Golang虽然在很多方面表现出色,但它并非完美无缺,根据已有的讨论和批评,以下是Go语言被广泛…

深入浅出:面向对象软件设计原则(OOD)

目录 前言 1.单一责任原则(SRP) 2.开发封闭原则(OCP) 3.里氏替换原则(LSP) 4.依赖倒置原则(DIP) 5.接口分离原则(ISP) 6.共同封闭原则(CCP&#xff09…

Android替换默认的按键音

替换audio_assets.xml文件 此文件在AudioService.java被调用 <!--文件位置 /frameworks/base/core/res/res/xml/--> <audio_assets version"1.0"><group name"touch_sounds"><asset id"FX_KEY_CLICK" file"Effect…

用idea将java文件打成jar包

一、用idea将java文件打成jar包 1、在idea上选择file—Project Structure 2、Artifacts —点–JAR—From modules with dependencies 3、选择要打包的java文件 4、Build — Build Artifacts 5、找到刚才添加的Artifacts直接Build 6、生成jar包文件

【总结】项目中用过的设计模式

1.单例模式&#xff08;饿汉式 、懒汉式&#xff09; 应用场景&#xff1a;当频繁使用同一个对象&#xff0c;如配置信息、数据库连接池、线程池等时&#xff0c;使用单例模式可以避免重复创建对象&#xff0c;节省资源 线程池 2.工厂模式 应用场景&#xff1a;当需要创建的…

关于 UEditorPlus 和 TinyMCE 编辑器上线 HKCMS 插件市场的通知

亲爱的各位用户&#xff1a; 我们非常高兴地向大家宣布一个重要的消息&#xff01;UEditorPlus 和 TinyMCE 编辑器现已成功上线 HKCMS 插件市场&#xff01; UEditorPlus 以其强大的功能和便捷的操作&#xff0c;为用户提供了卓越的编辑体验。而 TinyMCE 编辑器也一直以其稳定…

C语言 | Leetcode C语言题解之第140题单词拆分II

题目&#xff1a; 题解&#xff1a; struct Trie {int ch[26];bool flag; } trie[10001];int size;void insert(char* s, int sSize) {int add 0;for (int i 0; i < sSize; i) {int x s[i] - a;if (trie[add].ch[x] 0) {trie[add].ch[x] size;memset(trie[size].ch, 0…

C语言 | Leetcode C语言题解之第139题单词拆分

题目&#xff1a; 题解&#xff1a; unsigned long long Hash(char* s, int l, int r) {unsigned long long value 0;for (int i l; i < r; i) {value value * 2333ull;value s[i] - a 1;}return value; } bool query(unsigned long long* rec, int len_rec, unsigned…

【代码随想录】【算法训练营】【第30天 1】 [322]重新安排行程 [51]N皇后

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 LeetCode。 day 30&#xff0c;周四&#xff0c;好难&#xff0c;会不了一点~ 题目详情 [322] 重新安排行程 题目描述 322 重新安排行程 解题思路 前提&#xff1a;…… 思路&#xff1a;回溯。 重点&…

抖音a_bogus爬虫逆向补环境

抖音a_bogus爬虫逆向补环境 写在前面 https://github.com/ShilongLee/Crawler 这是我为了学习爬虫而搭建的爬虫服务器项目&#xff0c;目标是作为一个高性能的可靠爬虫服务器为广大爬虫爱好者和安全工程师提供平台进行学习爬虫&#xff0c;了解爬虫&#xff0c;应对爬虫。现已…

Github 2024-06-13开源项目日报Top10

根据Github Trendings的统计,今日(2024-06-13统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目3非开发语言项目2Shell项目1TypeScript项目1Swift项目1PHP项目1Blade项目1JavaScript项目1从零开始构建你喜爱的技术 创建周期:2156…

C#面:C#面向对象的思想主要包括什么?

C#面向对象的思想主要包括以下几个方面&#xff1a; 封装&#xff08;Encapsulation&#xff09;&#xff1a;封装是将数据和操作数据的方法封装在一起&#xff0c;形成一个类。通过封装&#xff0c;可以隐藏类的内部实现细节&#xff0c;只暴露必要的接口给外部使用。这样可以…

如何在浏览器书签栏设置2个书签实现一键到达网页顶部和底部

本次设置浏览器为&#xff1a;Chrome浏览器&#xff08;其他浏览器可自行测试&#xff09; 1&#xff0c;随便收藏一个网页到浏览器书签栏 2&#xff0c;右键这个书签 3&#xff0c;修改 4&#xff0c;修改名称 5&#xff0c;修改网址&#xff1a; javascript:(function(…