HOW - 在Windows浏览器中模拟MacOS的滚动条
目录
- 一、原生 CSS 代码实现
- 模拟 macOS 滚动条
- 额外优化
- 应用到某个特定容器
- 二、Antd table中的滚动条场景
- 三、使用第三方工具/扩展
如果你想让 Windows 里的滚动条 模拟 macOS 的效果(细窄、圆角、隐藏默认轨道)。
可以使用以下几种方案:
一、原生 CSS 代码实现
模拟 macOS 滚动条
/* 整个滚动条 */
::-webkit-scrollbar {width: 6px; /* 细窄滚动条 */height: 6px;
}/* 滚动条的轨道(macOS 是透明的,所以这里隐藏掉) */
::-webkit-scrollbar-track {background: transparent; /* 透明背景 */
}/* 滚动条滑块 */
::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.3); /* 半透明黑色 */border-radius: 10px; /* 圆角 */
}/* 滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {background: rgba(0, 0, 0, 0.5); /* 鼠标悬停时更明显 */
}
额外优化
macOS 的滚动条默认是 在滚动时才出现,你可以用 overflow: auto; + scrollbar-gutter 让它更接近 macOS:
.custom-scroll {overflow-y: auto;scrollbar-gutter: stable; /* 让内容不跳动 */
}
如果你希望在 不滚动时隐藏滚动条,可以用:
::-webkit-scrollbar {display: none;
}
⚠️ 注意:这样会完全隐藏滚动条,用户无法手动拖动滚动条,建议仅在特殊场景下使用。
应用到某个特定容器
如果你不想全局生效,只想对某个 div 应用 macOS 风格:
.macos-scrollbar {overflow-y: auto;
}.macos-scrollbar::-webkit-scrollbar {width: 6px;
}.macos-scrollbar::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.3);border-radius: 10px;
}
然后在 HTML 里:
<div class="macos-scrollbar" style="height: 300px; overflow-y: auto;">这里是很多很多的内容...
</div>
这样,Windows 上的滚动条就会变得像 macOS 一样 细窄、圆润、隐蔽,更加美观。
二、Antd table中的滚动条场景
在使用一些组件库如 Antd 时,内部组件存在滚动场景时,如table组件,会发现滚动条没生效,这里需要设置:
.ant-table-wrapper .ant-table {scrollbar-color: unset;
}
因为通过定位元素可以发现table自己设置了 scrollbar-color 属性。
三、使用第三方工具/扩展
对于 React 项目,可以通过以下 GitHub 工具实现滚动条的自定义(尤其是模拟 macOS 风格),以下是推荐的高质量工具:
- react-custom-scrollbars
https://github.com/malte-wessel/react-custom-scrollbars
- OverlayScrollbars
https://github.com/KingSora/OverlayScrollbars
- react-perfect-scrollbar
https://github.com/mdbootstrap/perfect-scrollbar
- smooth-scrollbar-react
https://github.com/nghiepdev/smooth-scrollbar-react
- simplebar-react
https://github.com/grsmto/simplebar
相关文章:
HOW - 在Windows浏览器中模拟MacOS的滚动条
目录 一、原生 CSS 代码实现模拟 macOS 滚动条额外优化应用到某个特定容器 二、Antd table中的滚动条场景三、使用第三方工具/扩展 如果你想让 Windows 里的滚动条 模拟 macOS 的效果(细窄、圆角、隐藏默认轨道)。 可以使用以下几种方案: 一…...
Unity 打包后EXE运行出现Field to Load il2cpp的一种情况
Unity版本2021.3.13f1c1 #if DEVELOPMENT_BUILDA1 A1 10600;#else#endif 使用 #if DEVELOPMENT_BUILD然后在下面面板使用Development Build。打包后会运行游戏EXE出现Field to Load il2cpp。 解决办法是换成IF ELSE,自己代码设置个开关、 文心一言: …...
Windows 环境下 Nginx、PHP 与 ThinkPHP 开发环境搭建
Windows 环境下 Nginx、PHP 与 ThinkPHP 开发环境搭建 目录 安装 Nginx 和 PHP配置 Nginx配置 PHP启动服务ThinkPHP 配置常见问题排查 1. 安装 Nginx 和 PHP 安装 Nginx 访问 Nginx 官网 下载 Windows 版本解压到指定目录,如 C:\nginx 安装 PHP 访问 PHP 官网…...
Redis100道高频面试题
一、Redis基础 Redis是什么?主要应用场景有哪些? Redis 是一个开源的、基于内存的数据结构存储系统,支持多种数据结构(如字符串、哈希、列表、集合等),可以用作数据库、缓存和消息中间件。 主要应用场景&…...
登录服务器后如何找到对应的drupal所在的文件夹
在服务器上找不到 Drupal 安装目录的原因可能有以下几种: 多站点配置: Drupal 支持多站点设置,即在同一安装中托管多个网站。在这种配置下,每个站点都有自己的设置和文件夹,通常位于 sites 目录下。例如,站…...
win32汇编环境,窗口程序中使控件子类化的示例一
;运行效果 ;win32汇编环境,窗口程序中使编辑框控件子类化的示例一 ;窗口子类化,就是把某种控件,自已再打造一遍,加入自已的功能。比如弄个特殊形状的按钮,或只能输入特殊字符的编辑框 ;当然,一般来说,这都是…...
专业工具,杜绝一切垃圾残留!
在安装大多数软件时均会在系统注册表中创建相应的条目。如果卸载后仍然存在注册表残留,可能会导致再次安装时出现失败,同时也会对系统性能和存储空间产生负面影响。常见的卸载残留包括注册表项、程序文件夹、用户数据文件夹、临时文件以及相关插件等。 …...
java 实现简易基于Dledger 的选举
java 实现简易基于Dledger 的选举 1. 定义 Dledger 节点类,包含节点的状态、日志存储、选举和日志复制逻辑 import java.util.ArrayList; import java.util.List; import java.util.Random; import java.util.concurrent.Executors; import java.util.concurrent.S…...
大数据“调味“ ,智慧“添香“,看永洪科技助力绝味食品数字化新征程
近年来,随着国家数字化政策不断出台、新兴技术不断进步、企业内生需求持续释放,数字化转型逐步成为企业实现高质量发展的必由之路,成为企业实现可持续发展乃至弯道超车的重要途径。 在全国数字化浪潮驱动下,以人工智能、互联网、…...
【嵌入式】MQTT
MQTT 文章目录 MQTT安装简介MQTT客户端代码 安装 安装Paho MQTT C库: sudo apt-get install libpaho-mqtt3-dev头文件包含: #include "MQTTClient.h"编译选项: gcc -o $ $^ -lpaho-mqtt3c简介 MQTT协议全称是(Message Queuing…...
vue原理面试题
以下是一些关于Vue原理的面试题: 一、虚拟DOM与响应式系统 Vue中的虚拟DOM是如何工作的? 答案: 当Vue组件的数据发生变化时,Vue首先会在虚拟DOM中构建一个新的虚拟DOM树来表示更新后的组件结构。然后,Vue会将新的虚拟DOM树与旧的虚拟DOM树进行比较(这个过程称为Diff算法…...
office集成deepseek插件,office集成deepseek教程(附安装包)
文章目录 前言一、下载与安装OfficeAI 助手二、获取 DeepSeek 的 API key三、在 OfficeAI 助手中配置 DeepSeek API key四、使用 OfficeAI 助手功能 前言 本教程将为你详细讲解 Office 集成 DeepSeek 的安装步骤和使用方法,助你轻松拥抱智能办公新时代,…...
行业洞察|安踏、迪桑特、始祖鸟、昂跑、lululemon等运动户外品牌的「营销创新和会员运营」对比解读
商派助力国际知名鞋品牌OMS系统全面升级,拓展业务类型和营销玩法! 一、业务模式创新:打破传统边界,构建多维竞争力 近年来,户外运动品牌在业务模式上的革新呈现三大趋势:DTC模式深化、多品牌矩阵重构、技术…...
小鹏汽车申请注册“P7 Ultra”商标 或为P7车型升级版铺路
大湾区经济网品牌工程频道报道,据企查查APP显示,广东小鹏汽车科技有限公司近日提交“P7 Ultra”商标注册申请,国际分类为运输工具,当前状态为“注册申请中”。业内推测,此举或为小鹏P7车型高端版本量产上市做准备。 作…...
数列极限入门习题
数列极限入门习题 lim n → ∞ ( 1 1 2 1 3 ⋯ 1 n ) 1 n \lim\limits_{n\rightarrow\infty}(1 \frac{1}{2}\frac{1}{3}\cdots\frac{1}{n})^{\frac{1}{n}} n→∞lim(12131⋯n1)n1 lim n → ∞ ( 1 n 1 1 n 2 ⋯ 1 n n ) \lim\limits_{n\rightarrow\…...
ubuntu部署gitlab-ce及数据迁移
ubuntu部署gitlab-ce及数据迁移 进行前梳理: 在esxi7.0 Update 3 基础上使用 ubuntu22.04.5-server系统对 gitlab-ce 16.10进行部署,以及将gitlab-ee 16.9 数据进行迁移到gitlab-ce 16.10 进行后总结: 起初安装了极狐17.8.3-jh 版本(不支持全局中文,就没用了) …...
批量设置 Word 样式,如字体信息、段落距离、行距、页边距等信息
在 Word 文档中,我们可以做各种样式的处理。比如设置 Word 文档的字体样式、设置 Word 文档的段落样式以及设置 Word 文档的页面样式。我们通常可以在 Office 中完成这些操作,相信绝大部分场景我们也是这样完成的。但是如果我们手上有 1000 个 Word 文档…...
【论文分析】语义驱动+迁移强化学习:无人机自主视觉导航的高效解决方案(语义驱动的无人机自主视觉导航)
论文阅读:《Semantic-Driven Autonomous Visual Navigation for Unmanned Aerial Vehicles》语义驱动的无人机自主视觉导航 1. 引言 这篇论文《Semantic-Driven Autonomous Visual Navigation for Unmanned Aerial Vehicles》发表在《IEEE Transactions on Indust…...
JDK官网安装教程 Windows
文章目录 概要整体架构流程 概要 JDK 是 Java 开发的基础,无论是开发桌面应用、Web 应用、移动应用,还是大数据、云计算相关项目,都需要先安装 JDK 整体架构流程 第一步,进入官网 Java Downloads | Oracle 中国 ①可以直接复…...
MR30系列分布式I/O:高稳定与高精准赋能锂电池覆膜工艺革新
在新能源行业高速发展的背景下,锂电池生产工艺对自动化控制的精准性和可靠性提出了更高要求。作为锂电池生产中的关键环节,覆膜工艺直接关系到电池的绝缘性能、安全性及使用寿命。面对复杂的工艺控制需求,明达技术MR30系列分布式I/O模块凭借其…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应,这是一种非线性光学现象,主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场,对材料产生非线性响应,可能…...
React Native 导航系统实战(React Navigation)
导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...
边缘计算医疗风险自查APP开发方案
核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况,可以通过以下几种方式模拟或触发: 1. 增加CPU负载 运行大量计算密集型任务,例如: 使用多线程循环执行复杂计算(如数学运算、加密解密等)。运行图…...
网络编程(UDP编程)
思维导图 UDP基础编程(单播) 1.流程图 服务器:短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由:大部分的转换软件需要收费,要么功能不齐全,而开会员又用不了几次浪费钱,借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...
