当前位置：首页 > news >正文

4个纯CSS自定义的简单而优雅的滚动条样式

news 来源：原创 2025/7/15 1:47:15

今天发现 uni-app 项目的滚动条不显示，查了下原来是设置了

::-webkit-scrollbar {display: none;
}

那么怎么用 css 设置滚动条样式呢？

定义滚动条整体样式‌ ::-webkit-scrollbar
定义滚动条滑块样式 ::-webkit-scrollbar-thumb
定义滚动条轨道样式‌ ::-webkit-scrollbar-track

好现在推荐 4 个 css 滚动条样式

.init::-webkit-scrollbar {display: block !important;width: 10px;
}
.init::-webkit-scrollbar-thumb {border-radius: 8px;background-color: #d55959;height: 60px;
}
.init::-webkit-scrollbar-track {border-radius: 8px;background-color: #e7e7e7;border: 1px solid #cacaca;
}

.init::-webkit-scrollbar {display: block !important;background-color: #ac99ba;width: 12px;border-radius: 10px;
}
.init::-webkit-scrollbar-thumb {background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.5, #a520ca), color-stop(1, #2681cc));border-radius: 10px;height: 60px;
}
.init::-webkit-scrollbar-track {border-radius: 10px;box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
}

.init::-webkit-scrollbar {display: block !important;width: 12px;
}
.init::-webkit-scrollbar-thumb {border-radius: 8px;background-color: #95a5a6;border: 1px solid #cacaca;height: 60px;
}
.init::-webkit-scrollbar-track {border-radius: 8px;background-color: #6089b0;
}

.init::-webkit-scrollbar {display: block !important;width: 16px;height: 16px;background-color: #F5F5F5;
}
.init::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);background-color: #747474;height: 60px;
}
.init::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: #F5F5F5;
}

4个纯CSS自定义的简单而优雅的滚动条样式

今天发现 uni-app 项目的滚动条不显示，查了下原来是设置了 ::-webkit-scrollbar {display: none; } 那么怎么用 css 设置滚动条样式呢？ 定义滚动条整体样式‌ ::-webkit-scrollbar 定义滚动条滑块样式 ::-webkit-scrollbar-thumb 定义滚动条轨道样式‌…...

编程日记 2025/7/15 1:47:15

修复笔记：SkyReels-V2项目中的 from_config 警告

#工作记录 Windows避坑部署SkyworkAI/SkyReels-V2昆仑万维电影生成模型_skyreels-v2本地部署-CSDN博客一、项目背景项目名称：SkyReels-V2 项目简介：由昆仑万维开源的全球首个无限时长电影生成模型，支持文本到视频、图像到视频等多种生成方…...

编程日记 2025/6/29 8:01:46

[硬件电路-11]：模拟电路常见元器件 - 什么是阻抗、什么是输入阻抗、什么是输出阻抗？阻抗、输入阻抗与输出阻抗的全面解析

1. 阻抗（Impedance） 定义：阻抗是电路或元件对交流信号（AC）流动的阻碍能力，用符号Z表示，单位为欧姆（Ω）。它综合了电阻（R）、电感（L&am…...

编程日记 2025/7/15 1:43:44

MCP协议与Dify集成教程

一、MCP协议概述 MCP（Model Control Protocol）是一种新兴的开放协议，为大型语言模型（LLM）与外部应用之间构建了双向通信通道。它就像是AI的"USB-C"接口，帮助模型发现、理解并安全调用各种外部工…...

编程日记 2025/7/15 1:34:43

flink常用算子整理

文章目录前言1.重新分配(即打散)2.合并流的算子3.算子链操作4.侧边输出(目前只有一种)5.键控进行分区6.输出算子7.其他基础操作算子8.其他常用的算子9.Flink窗口等情况10.窗口举例前言提示：以下是本篇文章正文内容，下面案例可供参考 1.重新分配(即打散) 2.合并流的算子 3…...

编程日记 2025/7/15 1:45:34

【SimSession】1：将视频发送逻辑与 libuv 事件循环集成是一个典型的并发设计问题

之前对SimSession的信令进行测试，echo可以与relay联通，现在单独提取已经集成了webrtc的发送模块及libuv框架与SimSession和echo集成：采集、编码和发送之前在pacedsender内部实现的现在从pacedsender中去掉采集、编码，放在session中运行。而pacedsender仅暴露发送部分：…...

编程日记 2025/7/15 1:37:37

Circular Plot系列(五): circle plot展示单细胞互作

这是我们circle系列的最后一节，我想常见的弦图是绕不开的，所以最后从前面介绍的circle plot思路，做一遍弦图。其实前面的内容如果消化了，plot互作弦图也就不成什么问题了。效果如下： #cellchat提取互作结果&#xff…...

编程日记 2025/7/15 1:36:36

LLama-v2 权重下载

地址：llama模型官方github仓库：llama仓库注意点网络代理位置：美国下面的国家选择 United States 克隆仓库后运行bash download.sh输入邮箱收到的URL选择要下载的权重等待下载完成即可有问题留言！！&#xff01…...

编程日记 2025/7/15 1:35:34

深入解析Linux进程间通信（IPC）：机制、应用与最佳实践

引言在多任务操作系统中，进程间通信（Inter-Process Communication, IPC）是协同工作的核心机制。Linux作为现代操作系统的典范，提供了8种主要IPC方式，从传统的管道到面向网络的套接字，每种方法都暗藏独特的…...

编程日记 2025/7/3 13:27:53

基于开源AI大模型AI智能名片S2B2C商城小程序源码的私域流量稳定性构建研究

摘要：在私域流量时代，传统实体零售的"时间积累"逻辑被直播电商等新业态颠覆。完美日记等新锐品牌通过构建私域流量池，实现了从0到1的指数级增长，而传统品牌却陷入"流量焦虑"。本文提出以开源AI大模型AI智能名…...

编程日记 2025/7/11 19:17:43

第13章：陈默再访海奥华

第13章：陈默再访海奥华第一节：启程——穿越虫洞的旅程 2046年，赤色世界的和平与繁荣达到了前所未有的高度。人类已经完成了从物质文明向意识文明的转变，精神力的普及让每一个人都拥有了学习、修复和感知的能力。然而&#xff0…...

编程日记 2025/6/29 6:58:53

Prompt compress 技术探究-LLMLingua2

LLMLingua2 https://arxiv.org/pdf/2403.12968是LLMLingua的改进版本。我们知道 LLMLingua需要用小模型压缩，模型太小不一定能保证性能，模型太大耗费时间又太长。这个方法理论上可以，但实际上不是很方便用。很难选择到合适的小模型。小模型…...

编程日记 2025/6/29 7:34:02

【机器学习案列-22】基于线性回归（LR）的手机发布价格预测

🧑 博主简介：曾任某智慧城市类企业算法总监，目前在美国市场的物流公司从事高级算法工程师一职，深耕人工智能领域，精通python数据挖掘、可视化、机器学习等，发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…...

编程日记 2025/7/3 21:18:17

python调用国税乐企直连接口开数电票之获取数字化电子发票批量预赋码信息

乐企平台介绍乐企平台作为国家税务总局推出的唯一数电票标准化的API接口重要平台，旨在通过税务系统与企业自有信息系统的直连涉税服务，开票员登录企业自有系统（ERP、OMS、发票管理系统等）无需通过第三方平台即可实现国税直连开票…...

编程日记 2025/6/29 8:14:14

Axure打开html文件失败，解决方案：

1、在原型文件中找到 2、文件后缀名改为 axure-chrome-extension.rar ,解压后到axure-chrome-extension 3、打开Chrome浏览器，找到扩展程序选择刚刚解压的文件axure-chrome-extension文件夹，配置完成，打开html试试吧...

编程日记 2025/6/29 7:34:09

Android第四次面试总结之Java基础篇（补充）

一、设计原则高频面试题（附大厂真题解析） 1. 单一职责原则（SRP）在 Android 开发中的应用（字节跳动真题） 真题：“你在项目中如何体现单一职责原则？举例说明。”考点：结合…...

编程日记 2025/7/8 18:30:07

网络开发基础（游戏）之心跳机制

简介心跳机制：是指客户端定时（比如每隔着10秒）向服务端发送PING消息，服务端收到后回应PONG消息。服务端会记录客户端最后一次发送PING消息的时间，如果很久没有收到下一次客户端发来的消息，服务端就就判…...

编程日记 2025/6/29 5:49:49

Hive进阶之路

目录一、Hive 基础回顾二、数据定义语言（DDL）进阶 2.1 复杂表创建 2.2 分区与分桶优化三、数据操作语言（DML）深入 3.1 高效的数据加载 3.2 灵活的数据更新与删除四、Hive 函数高级应用 4.1 内置函数的巧用 4.2 自定义…...

编程日记 2025/6/29 8:07:05

imx6uLL应用-v4l2

Linux V4L2 视频采集 JPEG 解码 LCD 显示实践本文记录一个完整的嵌入式视频处理项目：使用 V4L2 接口从摄像头采集 MJPEG 图像，使用 libjpeg 解码为 RGB 格式，并通过 framebuffer 显示在 LCD 屏幕上。适用于使用 ARM Cortex-A 系列开发板进…...

编程日记 2025/7/14 9:46:58

以太坊智能合约开发框架：Hardhat v2 核心功能从入门到基础教程

一、设置项目 Hardhat 项目是安装了 hardhat 包并包含 hardhat.config.js 文件的 Node.js 项目。操作步骤： ①初始化 npm npm init -y②安装 Hardhat npm install --save-dev hardhat③创建 Hardhat 项目 npx hardhat init如果选择 Create an empty hardhat.…...

编程日记 2025/6/29 5:11:55

【现代深度学习技术】现代循环神经网络06：编码器-解码器架构

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈PyTorch深度学习 ⌋ ⌋ ⌋ 深度学习 (DL, Deep Learning) 特指基于深层神经网络模型和方法的机器学习。它是在统计机器学习、人工神经网络等算法模型基础上，结合当代大数据和大算力的发展而发展出来的。深度学习最重…...

编程日记 2025/6/29 5:11:54

Jasper and Stella: distillation of SOTA embedding models

摘要 Dense检索是许多深度学习应用系统中（例如常见问题 （FAQ） 和检索增强生成 （RAG））关键组成部分。在此过程中，Embedding模型将原始文本转换为向量。然而，目前在文本Embedding基准…...

编程日记 2025/6/29 8:10:03

程序的本质—API接口

API 是什么官方定义：API 英文全称 Application Programming Interface，翻译过来为程序之间的接口。也是程序与外部世界的桥梁，实现了服务拆分与解藕的核心机制大白话：按照规则提供输入，它帮你得到对应的输出 API可…...

编程日记 2025/6/29 7:56:56

Python函数完全指南：从零基础到灵活运用

Python函数是组织代码、实现代码复用的基本单元，也是Python编程中最重要的概念之一。本文将全面介绍Python函数的知识体系，帮助初学者系统掌握函数的使用方法。一、函数基础概念 1. 什么是函数？ 函数是一段可重复使用的代码块&#xff0c…...

编程日记 2025/6/28 20:04:56

第十章.XML

文章目录 1.XMl简介2.解析XML技术2.1DOM解析XML 2.2DOM4j3.json 1.XMl简介 EXtensible Markup Language ,可扩充标记语言特点: XML与操作系统,编程语言的开发平台无关实现不同系统之间的数据交换作用: 数据交互配置应用程序和网站 XML标签 xml文档由一系列标签元素组成<…...

编程日记 2025/7/3 14:28:51

5个情感丰富GPT-4o图像提示词（不是吉卜力风格）

一场新的创意运动正在迅速兴起——人们不仅使用ChatGPT进行写作，还用它来构思富有想象力、情感丰富的视觉概念。这一趋势正在改变我们讲故事、建立品牌和探索创意的方式。从异想天开的海报世界到基于物品的故事叙述，各行业的创作者正在将ChatGPT与视觉生成工具结合使用，赋…...

编程日记 2025/7/4 4:52:41

华为OD机试真题——求最多可以派出多少支队伍（2025A卷：100分）Java/python/JavaScript/C/C++/GO最佳实现

2025 A卷 100分题型本专栏内全部题目均提供Java、python、JavaScript、C、C、GO六种语言的最佳实现方式； 并且每种语言均涵盖详细的问题分析、解题思路、代码实现、代码详解、3个测试用例以及综合分析； 本文收录于专栏：《2025华为OD真题目录…...

编程日记 2025/7/8 20:17:16

《七年一剑》速读笔记

文章目录书籍信息概览知己知彼市场的本质认识自我了解他人人剑合一技术分析精要K线分型均线节奏形态画线成交量周期级别指标之王——MACD波动理论管窥基本面A股周期论实战角度看财报构建交易系统打开交易之门交易基础之买卖依据风险控制与仓位管理系统评估及情绪管理实战秘…...

编程日记 2025/7/15 1:45:34

VMware-centOS7安装redis分布式集群

1.部署redis包 1.1 在usr/local文件夹里创建文件夹 mkdir software 1.2 进入文件夹 cd /usr/local/software/ 下载redis wget http://download.redis.io/releases/redis-6.2.6.tar.gz解压 tar zxvf redis-6.2.6.tar.gz重命名文件夹 mv redis-6.2.6 redis安装gcc编译器 yum i…...

编程日记 2025/6/29 7:17:10

Kubernetes(k8s)学习笔记(六)--KubeSphere前置环境安装

1、安装 helm（master 节点执行） Helm 是 Kubernetes 的包管理器。包管理器类似于我们在 Ubuntu 中使用的apt、Centos 中使用的 yum 或者 Python 中的 pip 一样，能快速查找、下载和安装软件包。Helm由客户端组件 helm 和服务端组件 Tiller 组…...

编程日记 2025/6/29 5:11:56

黑马点评day01(基于Redis)

1.7 Redis代替session的业务流程 1.7.1、设计key的结构首先我们要思考一下利用redis来存储数据，那么到底使用哪种结构呢？由于存入的数据比较简单，我们可以考虑使用String，或者是使用哈希，如下图，如果使用…...

编程日记 2025/6/29 5:41:41

14.Excel：排序和筛选

一位置两个位置。二排序：如何使用 1.常规使用补充：不弹出排序提醒排序。选中要排序列中的任意一个单元格，然后排序。 2.根据要求进行排序 1.根据姓名笔画进行降序排序要勾选上数据包含标题，默认是勾选了。 2.根据运营部、…...

编程日记 2025/7/15 1:37:36

力扣-字符串-468 检查ip

思路考察字符串的使用，还有对所有边界条件的检查 spilt（“\.”），toCharArray，Integer.parseInt() 代码 class Solution {boolean checkIpv4Segment(String str){if(str.length() 0 || str.length() > 4) retur…...

编程日记 2025/6/29 7:58:34

C++名称空间

名称空间名称空间可以是全局的，也可以位于另一个名称空间中，但不能位于代码块中。因此，在默认情况下，在名称空间中声明的名称的链接性为外部的（除非它引用了常量） 名称空间是开放的，你可以在…...

编程日记 2025/6/29 6:36:45

Redis 过期与淘汰机制全解析

概述 Redis 作为一种高性能的内存数据库，提供了数据过期和淘汰策略以管理存储的数据。本文将详细探讨 Redis 中数据失效的基本原理、实现方式，并结合源码进行分析，帮助读者更深入地理解和优化 Redis 的使用。数据过期机制过期键的存储方…...

编程日记 2025/6/29 5:12:38

PMP-第四章项目整合管理(一）

项目整合管理项目整合管理包括对项目管理过程组内的各种过程和项目管理活动而进行识别、定义、组合、统一与协调的各种过程和活动项目整合管理必须由项目经理负责。其他知识领域可以由相关领域专家管理，但整合的责任不能被授权或转移项目与项目管理本质上具有整合…...

编程日记 2025/6/29 5:12:07

VSCode搭建STM32开发调试环境

闲言碎语： 好久没更，在忙着科研→校招→写毕业论文。临近毕业，总结自己的大学生活：C\C、Java、Python、深度学习，学的乱七八糟。秋招找了个嵌入式工作（涉及AI应用），大致确定了以后…...

编程日记 2025/7/15 1:38:22

【数据结构】稀疏矩阵的快速转置

稀疏矩阵的快速转置如图给出一个稀疏矩阵，要求表示出它的转置矩阵由这个矩阵我们能轻松得到它的三元组顺序表 6行（x坐标）7列（y坐标）8个元素121213931-3361443245218611564-7 接下来我们同样把转置后的矩阵的三元组…...

编程日记 2025/7/14 10:59:26

【Godot】使用 Shader 实现可调节的精确切角效果

今天我们要实现的是一个四角精确切割Shader，可以在UI元素或Sprite的四个角分别切割出不同大小的三角形区域。文章目录什么是Godot Shader？数学原理详解左上角切割右上角切割右下角切割左下角切割四角切割Shader完整代码使用方法在Godot编辑器中设置通过代码控制进阶技巧1. …...

编程日记 2025/6/28 20:04:52

在CentOS环境中安装MySQL数据库保姆级教程

一.确认当前系统版本 1.1登录系统，切换至root账户如图所示： 1.2：在终端中执行如下命令查看系统版本 cat /etc/redhat-release 二.添加 MySQL Yum 源 2.1访问MySQL开发者专区 https://dev.mysql.com/downloads/repo/yum/ TIPS: 1.发布包命…...

编程日记 2025/6/28 20:04:50

分布式系统中的 ActiveMQ：异步解耦与流量削峰（二）

四、流量削峰 （一）流量削峰原理深入解析在当今互联网应用中，高并发场景屡见不鲜。例如，电商平台的促销活动、在线票务系统的抢票时刻以及社交平台的热点事件爆发期等，都会在短时间内迎来大量用户请求。这些瞬间涌入…...

编程日记 2025/6/28 20:04:48

JAVA设计模式——（十）抽象工厂模式（Abstract Factory Pattern）

JAVA设计模式——（十）抽象工厂模式（Abstract Factory Pattern） 介绍理解实现工厂接口工厂实现类应用类应用类实现测试改造工厂类应用介绍抽象工厂模式在工厂模式的基础上，适配的对象变为一组相关的对象&#xff0c…...

编程日记 2025/6/28 20:04:47

STM32的定时器

定时器的介绍介绍：STM32F103C8T6微控制器内部集成了多种类型的定时器，这些定时器在嵌入式系统中扮演着重要角色，用于计时、延时、事件触发以及PWM波形生成、脉冲捕获等应用。 *几种定时器（STM32F103系列）&#xff1…...

编程日记 2025/6/29 5:12:14

ubuntu-PyQt5安装+PyCharm配置QtDesigner + QtUIC

个人环境 ubuntu22.04 pycharm 2024.3 python 3.10 1)先使用apt命令在线安装 1)sudo apt install pyqt5* 2)sudo apt install qttools5-dev-tools2）Pycharm配置Pycharm External Tool 在设置—工具——外部工具中配置QtDesigner Name ：QtDesigne…...

编程日记 2025/6/29 6:07:42

测试基础笔记第十九天

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、接口的概念二、接口的类型三、接口测试1.概念2.原理：3.特点:4.实现方式:5.什么是自动化接口测试？ 二、HTTP协议1.HTTP协议简介2.URL格式…...

编程日记 2025/6/29 8:17:02

Ubuntu 系统上广受好评的浏览器推荐

日常使用与开发者首选 Firefox 特点：开源、隐私保护强大，支持丰富扩展（如开发者工具、广告拦截），默认预装且跨平台兼容368。适用场景：日常浏览、开发者调试（支持实时 CSS/JS 编辑）、…...

编程日记 2025/7/4 10:51:00

第 13 届蓝桥杯 C++ 青少组省赛中 / 高级组真题解析

一、选择题第 1 题题目：下列关于类中声明的变量描述正确的是 ( )｡ 选项： A. 只属于该类 B. 属于全局变量 C. 任何情况下都可被该类所有实例共享 D. 属于该类，某些情况下也可被该类不同实例所共享答案：D 解析&…...

编程日记 2025/6/29 7:34:41

Win10下安装Linux-Ubuntu24.04双系统

0 引言 Ubuntu 24.04 LTS（代号“Noble Numbat”）是 Canonical 于 2024 年 4 月 25 日发布的第 10 个长期支持版本，专注于性能优化、企业安全和开发者体验提升 Windows 10 是微软于 2015 年 7 月发布的跨平台操作系统，融合了传统桌…...

编程日记 2025/6/29 5:12:06

express 怎么搭建 WebSocket 服务器

一：使用 express-ws var express require(express); var app express(); var expressWs require(express-ws)(app);app.use(function (req, res, next) {console.log(middleware);req.testing testing;return next(); });app.get(/, function(req, res, next){…...

编程日记 2025/6/29 6:15:25

模型部署——cuda编程入门

CUDA中的线程与线程束 kernel是在device上线程中并行执行的函数，核函数用__global__符号声明，在调用时需要用<<<grid_size, block_size>>>来指定kernel要执行的线程数量。在CUDA中，每一个线程都要执行核函数，并…...

编程日记 2025/6/29 5:12:09

相关文章：